vue计算属性绑定input双向绑定失效
2019-06-10 本文已影响0人
本悟好
vue 计算属性直接绑定input,双向绑定会失效
<div v-for = "(item, index) in list": key = "index" >
<el - input v-model = "item.name" > < /el-input>
</div>
怎么解决了,只需要两步
-
在mounted里面把计算属性adList赋给list
-
watch监听变化并赋值
export default {
computed: {
...mapGetters({
componentForm: "form"
}),
adList() {
const arr = [];
this.componentForm.list.forEach(item => {
const listItem = item.list;
arr.push(list[0] || [{
name: 'abc'
}])
})
return arr
}
},
watch: {
adList: {
deep: true,
handler: function(newData, oldData) {
this.list = newData;
}
}
},
data() {
return {
list: []
}
},
mounted() {
this.list = this.adList;
}
}