vue 监听对象属性值变化失效

Question

监听对象

plinedata: {},

赋值部分

//创建plinedata键,赋值为列表
if (!this.plinedata[analysisobj.ID]) {
    this.plinedata[analysisobj.ID] = []
}
//像plinedata对象对应设备ID添加坐标对象
this.plinedata[analysisobj.ID].push(poingobj)

监听函数

plinedata: {
      handler: function (newVal, oldVal) {
        console.log(newVal,oldVal)
         //绘制图形
        // this.drawBikeRoute(newVal)
      },
      deep: true
    }

现在数据添加进plinedata中了,但是监听事件没有生效,我需要怎么操作才能监听到plinedata对象对应列表的变化呢,plinedata的键是动态的,我改如何修改代码呢

Answer 1

可以通过this.$set(this.plinedata, analysisobj.ID, poingobj);进行动态绑定，因为vue的响应式数据绑定是建立在Object.defineProperty之上，题主的key都是动态的，也就是未预定义的，所以无法在程序初始化的时候进行监听绑定或者叫响应式绑定。可以通过vue提供的$set方法进行动态绑定。