Question

我在vuejs中有这个代码，但模板中的for没有更新。在输入文本中添加一些数据时它会改变，但我想更新@click

中的列表

methods: {
    addModule:function(){
        var size = Object.keys( this.modules ).length;
        this.modules[size] = {
            enumerate: '1.1',
            name: 'test',
            description: 'test d',
            type: 'module',
            criteria: {}
        };
        console.log(this.modules);
    }
}

Answer 1

Vue.js无法检测对象中的新属性。见https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

您可以使用Vue.set（）：

var size = Object.keys( this.modules ).length;
        Vue.set(this.modules,size,{
            enumerate: '1.1',
            name: 'test',
            description: 'test d',
            type: 'module',
            criteria: {}
        });

Answer 2

您似乎遇到了vue.js文档中定义的对象更改检测警告。具体来说，您似乎正在添加之前不存在的新对象属性，因此未检测到更改。

这是一个可能的解决方法：

methods: {
    addModule:function(){
        var size = Object.keys( this.modules ).length;
        this.modules[size] = {
            enumerate: '1.1',
            name: 'test',
            description: 'test d',
            type: 'module',
            criteria: {}
        };
        this.modules = Object.assign({}, this.modules);
        console.log(this.modules);
    }
}

添加的行将作为已分配给原始对象的克隆版本。由于此克隆对象实际上是一个单独的对象，因此将强制检测相关更改。

但是，请注意，如果需要，深度克隆将需要额外的工作。

为什么模板中的v-for仅在输入文本更改时更新？

2 个答案: