文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue3根据动态字段绑定v-model的操作代码

2022-11-13 18:17

关注

因业务需要用到低代码,v-model绑定的是随机生成的

<template>
    <input type="text" v-model="form[key]">
    <button @click="submit">提交</button>
</template>
<script setup>
import { ref } from "vue"
const form = ref({})
const key = ref("input-123456")
const submit = () => {
    console.log(form.value)
}
</script>

在这里插入图片描述

VUE动态绑定v-model变量(ui框架iview)

需求

最近在学习vue技术,开发表格的时候,想把表格做成组件,那查询条件就需要动态生成,这就遇到一个问题,vue怎么动态给v-model变量值。

UI框架使用的是iview

页面渲染(子组件)

 <div class="ivu-card-body">
        <Form ref="formInline" v-model="formInline" inline>
          <Row type="flex" justify="end" align="middle">
            <Col
              :xs="24"
              :sm="24"
              :md="6"
              :lg="12"
              :xl="8"
              class="form-item-col"
              v-for="(formItem, formIndex) in formArray"
              :key="formItem.id"
              :value="formIndex"
            >
              <FormItem :label="formItem.label + ':'">
                <Input
                  v-if="formItem.componentType == 'input'"
                  :type="formItem.type"
                  v-model="formInline[formItem.model]"
                  :placeholder="formItem.placeholder"
                >
                </Input>
              </FormItem>
            </Col>
            <Col
              :xs="24"
              :sm="24"
              :md="6"
              :lg="12"
              :xl="8"
              class="form-item-col ivu-btn-right"
            >
              <FormItem>
                <Button
                  type="primary"
                  class="ivu-seach-btn"
                  @click="SeachHanler"
                  >搜索</Button>
              </FormItem>
            </Col>
          </Row>
        </Form>
</div>

子组件js

export default {
  name: "TableSearch",
  props: {
    formArray: {
      type: [Object, Array],
      default: () => {}, //这边是箭头函数
    },
  },
  data() {
    var dataInit = {
      formInline: {}, //查询条件form
    };
    return dataInit;
  },
  watch: {
    // 处理循环的数据  
    formArray() {
       this.formArray.map((item) => {
        if (item && item.model && item.modelValue) {
          this.$set(this.formInline, item.model, item.modelValue);
        }
      });
    },
  },
  methods: {
    //搜索
    SeachHanler() {
      this.$emit("on-search", this.formInline);
    }
  },
  mounted() {},
  created() {},
};

父组件使用

  data() {
    return {
      formArray: [
      {
        componentType: "input",
        type: "text",
        model: "UserName",
        modelValue: "用户1",
        placeholder: "请输入用户名1111",
        label: "用户名111",
        id: "1",
      },
      {
        componentType: "input",
        type: "text",
        model: "Phone",
        modelValue: "11111",
        placeholder: "请输入电话",
        label: "电话",
        id: "2",
      }
    ]
    };
  },

遇到的问题以及解决

1.问题: 怎么让变量值绑定到v-model上
解决: v-model="formInline[formItem.model]"
其中formInline是在form组件上定义的一个对象

2.问题:变量值绑定上去了,怎么去让数据显示到子组件的“data”中
解决: 通过watch监听 formArray的值变化,然后使用下面的代码进行反显,不然会导致v-model绑定的变量无法修改。
this.$set(this.formInline, item.model, item.modelValue);

到此这篇关于Vue3根据动态字段绑定v-model的文章就介绍到这了,更多相关Vue3动态绑定v-model内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯