我有一个自定义选择组件,它适用于一个简单的变量,但与 v-for 一起使用时它将不起作用:
https://jsfiddle.net/7gjkbhy3/19/ https://jsfiddle.net/7gjkbhy3/19/
<select2 v-for="item, index in samples" v-model="item" ></select2>
data : { samples : [0, 0, 0]}
这有效:
<select2 v-model="sample"></select2>
data : { sample : 0}
我在这里缺少什么?
v-model
and v-for
不能很好地配合,如果v-model
用于带有原始值的迭代别名。
Vue 警告:
你正在绑定v-model
直接到一个v-for
迭代别名。这会
无法修改 v-for 源数组,因为写入
别名就像修改函数局部变量。考虑使用
对象数组并在对象属性上使用 v-model。
因此,使用每个对象都有一个用于选择值的属性的对象数组可以解决该问题:
工作示例 https://jsfiddle.net/7gjkbhy3/21/.
<select2 v-for="item, index in samples" v-model="item.value" ></select2>
new Vue({
el: '#app',
data: {
sample: 0,
samples : [{ value: 0 }, { value: 0 }, { value: 0 }]
}
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)