Question

如何从Vue.js数据对象（即关联数组）中删除属性/键，如下所示：

var vm = new Vue({
    data: {
        users: {
            foo : { firstName: ..., lastName: ... },
            bar : { firstName: ..., lastName: ... }
        }
    },
    methods: {
        someFunction : function ()
        {
            // how to remove `users.foo`?
        }
    }
});

在谷歌上搜索，我发现了这两种方式，但都不起作用：

delete this.users.foo;未更新DOM
this.users.splice('foo', 1);根本不起作用（可能只适用于数组，而不适用于对象）

Answer 1

答案是：

Vue.delete(users, 'foo');

我花了一段时间才找到它，这就是我在这里发布的原因;-)
https://github.com/vuejs/vue/issues/3368#issuecomment-236642919

Answer 2

重要的是要知道vm.$delete是Vue.delete的别名，如果尝试使用类似this.delete()的方法，则会出错。因此，在您的示例中，答案将是：

this.$delete(this.users, 'foo')

或

vm.$delete(vm.users, 'foo')

https://vuejs.org/v2/guide/migration.html#vm-delete-changed

Answer 3

您必须创建对象的新副本，以便Vue能够知道有更改：

ES6

const users = { ...this.users };
delete users['foo'];
this.users = users

或没有传播算子，它将是

const users = Object.assign({}, this.users);
delete users['foo'];
this.users = users

Vue.js 2：从数据对象中删除属性

3 个答案: