需求
当在使用v-for循环生成一个带表单的标签块,表单需要进行双向绑定时

如果直接在items数组中的对象属性VM赋值给v-model实现数据的双向绑定

v-model="obj.name" //这样的效果
<div >
        <input
        v-for="(item,index) in items"
        :key="index"
        :type="item.type"
        :placeholder="item.placeholder"
        v-model="item.VM"
      />
</div> 
export default {
  data() {
    return {
        items:[
            {type="text", VM: "obj.name", placeholder: "请输入用户名",}, //VM属性名对应的属性值 为需要动态引入obj对象的name属性
             {type="password", VM: "obj.password", placeholder: "请输入密码",},
        ],
        obj:{
            name:'这个是最终要绑定的属性',
            password: '',
        }
    };
  },
  }

实际上应该这样做:

如果你绑定的变量名本来不是对象的属性时,需要将变成对象的属性名

<div >
        <input
        v-for="(item,index) in items"
        :key="index"
        :type="item.type"
        :placeholder="item.placeholder"
        v-model="obj[item.VM]"
      />
</div>
Logo

前往低代码交流专区

更多推荐