vue 在v-for 中使用v-model绑定变量

需求

当在使用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>

原理比较简单，就是在JS中对象，获取属性值时使用的方法不同造成的结果，如果是使用对象.属性名的方式来获取的话，属性名是不能为变量的；但是使用对象[属性名]这种方式时，属性名就可以为变量。