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

Tho*_*uer 39 javascript vue.js vuejs2

如何从Vue.js数据对象(即关联数组)中删除属性/键,如下所示:

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

谷歌搜索,我找到了这两种方式,但都不起作用:

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

Tho*_*uer 69

答案是:

Vue.delete(users, 'foo');
Run Code Online (Sandbox Code Playgroud)

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

  • 奇怪的是,它甚至在文档中也没有描述:https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats。它只是说“ Vue无法检测到属性的添加或删除”,并且没有解释您应该怎么做 (5认同)

小智 26

重要的是要知道这vm.$delete是它的别名Vue.delete,如果您尝试类似的操作this.delete(),将会得到一个错误。因此,在您的示例中,答案将是:

this.$delete(this.users, 'foo')
Run Code Online (Sandbox Code Playgroud)

要么

vm.$delete(vm.users, 'foo')
Run Code Online (Sandbox Code Playgroud)

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