<blockquote id="eiid6"></blockquote>

Vue如何監(jiān)聽數(shù)據(jù)對象里面屬性的變化？

這是數(shù)據(jù)模板：

return {
    plans: [
        {
            gate: 'Gate1 - 產(chǎn)品策劃',
            childrens: [
                {
                    gate: '市場信息調(diào)研',
                    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 - 產(chǎn)品技術(shù)需求和項目規(guī)劃階段',
            childrens: [
                {
                    gate: '完成PRD',
                    starTime: '2017-11-10',
                    endTime: '2017-11-15',
                    show: true,
                    remarks: [
                        {
                            content: 'xxxxxx'
                        },
                        {
                            content: 'xxxxxx'
                        }
                    ]
                },
                {
                    gate: '關(guān)鍵物料準備',
                    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: []
                },
            ]
        },
    ]
}

這個是頁面：

頁面上的開始時間和結(jié)束時間是分別綁定到starTime和endTime上的，我要怎么監(jiān)聽到starTime和endTime的變動呢？并且重新選擇時間后我要怎么賦值？

回答

編輯回答

雨萌萌

1、開始結(jié)束時間不是雙向綁定的嗎？為什么還需要賦值呢
2、如下代碼所示，計算屬性timeList可以得到{'0-0':{startTime:'2017-01-01',endTime:'2017-01-01'},'0-1':{startTime:'2017-02-01',endTime:'2017-02-01'}}這樣的對象
通過watch timeList，即可檢測到開始結(jié)束時間的變動

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

2018年3月30日 01:27

編輯回答