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

Question

这是数据模板：

return {
    plans: [
        {
            gate: 'Gate1 - 产品策划',
            childrens: [
                {
                    gate: '市场信息调研',
                    starTime: '2017-11-10',
                    endTime: '2017-11-15',
                    show: true,
                    remarks: [
                        {
                            content: 'xxxxxxxx'
                        },
                        {
                            content: 'xxxxxxxx'
                        }
                    ]
                },
                {
                    gate: 'kick-off meeting',
                    starTime: '2017-11-10',
                    endTime: '2017-11-15',
                    show: true,
                    remarks: [
                        {
                            content: 'xxxxxx'
                        },
                        {
                            content: 'xxxxxxxxx'
                        }
                    ]
                },
            ]
        },
        {
            gate: 'Gate2 - 产品技术需求和项目规划阶段',
            childrens: [
                {
                    gate: '完成PRD',
                    starTime: '2017-11-10',
                    endTime: '2017-11-15',
                    show: true,
                    remarks: [
                        {
                            content: 'xxxxxx'
                        },
                        {
                            content: 'xxxxxx'
                        }
                    ]
                },
                {
                    gate: '关键物料准备',
                    starTime: '2017-11-10',
                    endTime: '2017-11-15',
                    show: true,
                    remarks: [
                        {
                            content: 'xxxxxx'
                        },
                        {
                            content: 'xxxxxx'
                        }
                    ]
                },
                {
                    gate: 'Gate Review',
                    starTime: '2017-11-10',
                    endTime: '2017-11-15',
                    show: true,
                    remarks: []
                },
            ]
        },
    ]
}

这个是页面：

页面上的开始时间和结束时间是分别绑定到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)
  }
}

Answer 2

绝绝！我觉得OK