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="pe"
:
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:"请输⼊密码",},
],input标签placeholder属性
obj:{
name:'这个是最终要绑定的属性',
password:'',
}
};
},
}
实际上应该这样做：
如果你绑定的变量名本来不是对象的属性时，需要将变成对象的属性名
<div >
<input
v-for="(item,index) in items"
:key="index"
:type="pe"
:placeholder="item.placeholder"
v-model="obj[item.VM]"
/>
</div>
原理⽐较简单，就是在JS中对象，获取属性值时使⽤的⽅法不同造成的结果，如果是使⽤对象.属性名的⽅式来获取的话，属性名是不能为变量的；但是使⽤对象[属性名]这种⽅式时，属性名就可以为变量。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。