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

Posted

技术标签:

【中文标题】Vue.js 2:从数据对象中删除属性【英文标题】:Vue.js 2: Delete property from data object 【发布时间】:2017-12-10 18:55:49 【问题描述】:

如何从 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); 根本不起作用(可能仅适用于数组,不适用于对象)

【问题讨论】:

我相信 vue2 实现了自己的数组拼接。正如你所说,它不适用于对象。 【参考方案1】:

答案是:

Vue.delete(users, 'foo');

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

【讨论】:

奇怪的是,它甚至没有在文档中描述:vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats。它只是说“Vue 无法检测到属性添加或删除”,并没有解释你应该如何做 @Migwell 这里好像提到了:vuejs.org/2016/02/06/common-gotchas 值得注意的是,如果你想添加一个属性到一个对象,类比是Vue.set【参考方案2】:

知道vm.$deleteVue.delete 的别名很重要,如果你尝试this.delete() 之类的东西,你会得到一个错误。所以在你的例子中,答案是:

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

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

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

【讨论】:

非常感谢。这确实是一个正确的答案。它可以解决 VUEJS 无法观看删除或添加的数据的问题。【参考方案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.delete 比这个解决方案更可取,因为它不涉及创建一个全新的对象,因为它在这里完成

以上是关于Vue.js 2:从数据对象中删除属性的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js 删除渲染函数中的 contenteditable 属性

《深入浅出Vue.js》读书笔记2-Proxy的自我尝试

如何从 Firebase 存储中删除 Vue.js 组件图像?

Vue JS如何根据数组值删除对象

如何解决“属性内的插值已被删除。使用 v-bind 或冒号速记”? Vue.js 2

根据Laravel Vue Js Api中的关系从多个表中删除数据