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.$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
【讨论】:
非常感谢。这确实是一个正确的答案。它可以解决 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 属性
如何从 Firebase 存储中删除 Vue.js 组件图像?