vue.js watch 监听以对象存取的数据，不能取到具体的值？

Question

handleRowHandle(row){ 
            var startPoint = [];
            startPoint.push(row.StartLONG);
            startPoint.push(row.StartLAT);

            var endPoint = [];
            endPoint.push(row.EndLONG);
            endPoint.push(row.EndLAT);
            
            this.mapoint.length = 0;
            this.mapoint.push(startPoint);
            this.mapoint.push(endPoint);
         },

事件获取坐标值。

<Amap :childmapoint="mapoint"  style="height:45vh;width:100%"></Amap>

绑定。传给子组件。

  export default{
            name:'amap',
            data:function(){
                return {
                    positions:[],
                }
            },
            props:['childmapoint'],
            mounted: function () { 
                console.log("jjjjjjj")
                console.log(this.childmapoint)
            //地图初始化  
            this.map = new AMap.Map(this.$el, {
                resizeEnable: true,
                zoom: 12,
            })           
        },
    
        watch:{
            childmapoint:function(){
                console.log(this.childmapoint)
                
                //清除所有的地图覆盖物
                this.map.clearMap();
                this.positions = this.childmapoint;
                for(let i=0;i<this.positions.length;i++){
                    let marker = new AMap.Marker({
                    position:this.positions[i],
                });
                marker.setMap(this.map);  //为marker指定目标显示地图。
          },
        }
  }

这种方式可以传值。

我把点击事件获取指的方式。变成了：

 handleRowHandle(row){
              console.log(row);
                 this.mapValueObj.EventTypeObj = row.EventType;
                 this.mapValueObj.PlateNumberObj = row.PlateNumber;
                 this.mapValueObj.StartTimeObj = row.StartTime;
                 this.mapValueObj.StartMessageObj = row.StartMessage;
                 this.mapValueObj.EndTimeObj = row.EndTime;
                 this.mapValueObj.EndMessageObj = row.EndMessage;
                
             var startPoint = [];
             startPoint.push(row.StartLONG);
             startPoint.push(row.StartLAT);

             var endPoint = [];
             endPoint.push(row.EndLONG);
             endPoint.push(row.EndLAT);
            
             var mapoint = [];
             mapoint.length = 0;
             mapoint.push(startPoint);
             mapoint.push(endPoint);
             this.mapValueObj.mapointObj = mapoint;
            console.log(this.mapValueObj)

          },

变成了传递对象。

<Amap :childmapoint="mapValueObj"  style="height:45vh;width:100%"></Amap>

子组件

       name:'amap',
            data:function(){
                return {
                    positions:[],
                }
            },
            props:['childmapoint'],
            mounted: function () { 
            //地图初始化  
            this.map = new AMap.Map(this.$el, {
                resizeEnable: true,
                zoom: 12,
            })           
        },
          watch:{
            childmapoint:function(){
                //清除所有的地图覆盖物
                this.map.clearMap();
                this.positions = this.childmapoint.mapointObj;
                for(let i=0;i<this.positions.length;i++){
                    let marker = new AMap.Marker({
                    position:this.positions[i],
                });
                marker.setMap(this.map);  //为marker指定目标显示地图。
}

传值不成功？问题出在哪？

Answer 1

把数据存储在数组中，可以获取。

对象不能被监听。https://github.com/vuejs/vue/...

Answer 2

我记得watch对象是要深度监测的

    watch:{
    
    
    object:{
      handler:function(val){
              
              console.log(val);
              }
      deep:true;        
    
    }
    
    }


}

详情 https://vuejs.org/v2/api/#watch