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

Answer 2

您可以在此外观中使用

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

使用$ set （如https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats中所述），可观察对象将被正确添加

Answer 3

您可以将 filter 属性中的 data 对象初始化放入 created Vue lifecycle hook。

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

Vue.js正在观看深层物业

3 个答案: