如何使用vue $ watch更改数组中的对象属性？

Question

我需要在数组中更改对象属性。 为了做到这一点，我正在使用vue。$ watch。 我阅读了文档，但我没有得到它。

场景是：

...
data() {
        return {            
            Questions: [{foo: 1}, {foo: 2}, {foo: 3}]
        }
    },
...

this.$watch("Questions", function (newVal, oldVal) {
    // something...
}, { deep: true });

已更新

解决方案就在这里！

See the example on JsFiddle

Answer 1

存在Javascript限制 - 如果直接更改数组元素（例如1_1_1_1_1_0_1_0_666 [ 1 0 0 0 1 0 ] ），Vue无法跟踪这些更改，因此不会触发观察程序。

如果你使用任何this.array[0].foo = 'bar'函数，例如Array.prototype，push或将重新分配数组，它将被触发。

所以最基本的解决方案就是这样：

pop

更新了jsFiddle：here

结帐：Arrays reactivity in Vue.js