vue data 数组插入新属性,新数据在视图层无法实现双向绑定
问题描述:vue 中的data对象数组在插入新数据后,新数据变更,View视图不会更新数据,如下方代码
<template>
<div>
<div v-for="(item,i) of list">
<p>{{item.cb}}</p> //未能双向绑定
<p>{{item.price}}</p> //能实现双向绑定
</div>
</div>
</template>
export default {
data(){
return {
list:[{id:0,price:88},{id:1,price:99}],
}
},
methods:{
init(){
var list=this.list
for(var i of data){
i.cb=false //在原数组对象中新加入cb属性,
}
this.list=list
},
cart_btn(key){
this.list[key].cb=!this.list[key].cb
console.log(this.list) //当打印后,cb发生改变,但view视图未改变(除cb外,其他能更新)
}
},
created(){
this.init()
}
}
错误原理:vue data数组list的数据格式为[_ob_:observer] 当用list赋值遍历,插入cb对象时,数据格式为
[cb:false,_ob_:observer] ,cb未插入到observer里,所以cb在前台未能实现同步.
解决办法
在数组数据格式不为[_ob_:observer] 时插入数据,再赋值给list ,此时数据格式自动变为[_ob_:observer],cb就被插入到observer中.
export default {
data(){
return {
list:[],
}
},
methods:{
init(){
var data=[{id:0,price:88},...]
for(var i of data){
i.cb=false //此时数组的数据格式还不是 [__ob__:observer],在插入新数据后,再赋值给list
}
this.list=data //将数据赋值给 vue data 时数据就会转换为[__ob__:observer]
},
cart_btn(key){
this.list[key].cb=!this.list[key].cb
}
},
created(){
this.init()
}
}