vue 在v-for 中使用v-model绑定变量
需求当在使用v-for循环生成一个带表单的标签块,表单需要进行双向绑定时如果直接在items数组中的对象属性VM赋值给v-model实现数据的双向绑定v-model="obj.name" //这样的效果<div ><inputv-for="(item,index) in items":key="index":type="item.type":placeholder="item.p
·
需求
当在使用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>
更多推荐
已为社区贡献4条内容
所有评论(0)