vue data 数组,视图层绑定数据无法更新

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()
  }
}