如何使用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