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

文檔在這里涵蓋了這一點。

由於現代 JavaScript 的限制（以及 Object.observe 的廢棄），Vue 無法檢測到屬性的添加或刪除。

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

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

Answer 2

你可以使用看起來像這樣的東西

this.$set(this.filters, 'name', "")

使用 $set （如https://v2.vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats中所述）將正確添加 observable

Answer 3

您可以將data屬性中的filter對象初始化放入已created的Vue 生命周期鈎子中。

var vueTable = new Vue({
    el: '#vue-table',
    // If you attach filters at this point in time
    // the watcher will work normally.
    created: function () {
        this.$data.filters = {
            filter_one: null,
            filter_two: null
        };
    },
    data: {
        filters: null,
    },
    watch: {
        filters: {
            handler: function (newValue) {
                // Here you will get the entire filter object 
                // if some property changes.
                console.dir(newValue);
            },
            deep: true
        }
    }
}