javascript - 如何使用 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 限制 - 如果直接更改数组元素(例如 this.array[0].foo = 'bar')，Vue 无法跟踪这些更改，因此观察者不会触发。

如果您使用任何 Array.prototype 函数，例如 push、pop 或将重新分配数组，它将被触发。

所以最基本的解决方案将如下所示:

change: function () {
  let questions = this.Questions;
  questions[0].foo = 5;

  this.Questions = questions;
  
  /* or
   let index = 0;
   let question = this.Questions[index];
   question.foo = 5;
   this.Questions.splice(index, 1, question);
  */
}

<小时/>

更新了 jsFiddle: here

要查看的内容:Arrays reactivity in Vue.js