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：'某事'}；表初始化后，它将在每次更改时触发。

这是意料之外的行为吗？或者我们必须定义我们所有的属性才能被监视？

Answer 1

您可以将＜code＞过滤器＜code＞对象初始化置于＜code＞数据

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
        }
    }
}

Answer 2

您可以使用具有此外观的东西

$set（this.filters，'名称', "")

使用$set（如中所述https://v2.vuejs.org/v2/guide/reactivity.html#Change-检测注意事项）将正确添加可观察对象

Answer 3

留档涵盖了这一点。

由于现代JavaScript的局限性（以及Object.observe的放弃），Vue无法检测到属性的添加或删除。

通过从空对象开始并将＜code＞v-model，您最终会动态添加属性。在这种情况下，最好的方法是初始化数据中的属性。它不必有值。

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