Question

我有一个简单的数组结构如下：

dates[2]
  0:"2018-01-09T15:00:00.000Z"
  1:"2018-01-10T14:00:00.000Z"

我的观察者设置如下：

data() {
    return {        
        dates: [],
    }
}

watch: {
    // whenever dates changes, this function will run
    dates: {
        handler: function(before, after) {
            console.log('dates is changed');
        },
        deep: true
    }
},

唯一的变化是＆＃34;观看＆＃34;是在添加或删除数组元素时，而不是在值（时间）更改时。

如何实现此行为？

Answer 1

由于JavaScript的限制，Vue无法检测到对数组的以下更改：

直接设置带索引的项目时，例如vm.items[indexOfItem] = newValue

修改数组的长度时，例如vm.items.length = newLength

为了克服警告1，以下两个方法将完成与vm.items[indexOfItem] = newValue相同的操作，但也会在反应系统中触发状态更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

要处理警告2，您可以使用拼接：

example1.items.splice(newLength)

来源：https://vuejs.org/v2/guide/list.html#Caveats

Watcher没有捕获数组值的变化

1 个答案: