Vue.js看深性質

Question

我試圖觀看vue.js對象的屬性，但我沒有得到我想要的結果，我的代碼如下：

var vueTable = new Vue({ 
    el: '#vue-table', 
    data: { 
     filters: {}, 
    }, 
    watch: { 
     filters: { 
      handler: function() { 
       console.log('watched'); 
      }, 
      deep: true 
     } 
    } 
} 

，我有v-model上的輸入，像這樣：

<input class="form-control" v-model="filters.name"> 

現在，當頁面加載它的控制檯登錄watched只有一次，每當我改變輸入它不記錄任何東西。

然而，當我在表格初始化後放入vueTable.filters = {name: 'something'};時，它會觸發每一個變化。

這是出乎意料的行爲？或者我們是否必須定義所有的屬性才能看到它們？

Answer 1

該文件涵蓋此here。

由於現代JavaScript的侷限性（並且放棄了Object.observe），Vue無法檢測屬性的添加或刪除。

通過以空對象開始並將v-model設置爲filters.name，最終動態添加屬性。在這種情況下，最好的方法是初始化數據中的屬性。它不一定有價值。

data: { 
    filters: { name: null }, 
}