Vue如何监听数据对象里面属性的变化？

Question

这是数据模板：这个是页面：页面上的开始时间和结束时间是分别绑定到starTime和endTime上的，我要怎么监听到starTime和endTime的变动呢？并且重新选择时间后我要怎么赋值？

Answer 1

1、开始结束时间不是双向绑定的吗？为什么还需要赋值呢

2、如下代码所示，计算属性timeList可以得到{'0-0':{startTime:'2017-01-01',endTime:'2017-01-01'},'0-1':{startTime:'2017-02-01',endTime:'2017-02-01'}}这样的对象

通过watch timeList，即可检测到开始结束时间的变动

computed: {

  timeList(){

    var tmp = {}

    this.plans.forEach((item1, index1) => {

      item1.children.forEach((item2, index2) => {

        tmp[index1 + '-' + 'index2'] = { starTime: item2.starTime, endTime: item2.endTime }

      })

    })

  }

},

watch:{

  'timeLine': function(newVal,oldVal){

    console.log('newVal', newVal)

    console.log('oldVal', oldVal)

  }

}