Vue:如何从数组中删除对象的值

Vue: How to remove object from array by it's value?

本文关键字：删除 对象 数组 Vue      更新时间：2023-09-26

是否有可能通过它的值从数组中删除对象，而不是通过索引而不与for循环迭代?

我试图删除元素与迭代，但它看起来像它不删除迭代元素:

App.$refs.userContent.foo : [1,2,3,4]
console.log(App.$refs.userContent.foo);
App.$refs.userContent.foo.forEach(function(x,i) 
 {
App.$refs.userContent.foo.$remove(i);
});
console.log(App.$refs.userContent.foo);
结果:

[1, 2, 3, 4, __ob__: Observer]

[3, 4, __ob__: Observer]

为什么不删除所有的元素?

当您从数组中删除元素时，您正在更改保留元素的索引。如果想要删除所有元素，可以在.forEach()中执行以下操作:

// Keep removing first array element until they're all gone
App.$refs.userContent.foo.$remove(0);

…但是清空数组会很奇怪。

回答你最初的问题-不。不能在一步中按值删除数组元素。首先必须找到元素的索引，然后按索引删除它。在普通JS中，你可以使用.splice()来删除一个元素的索引:

// Remove 4th element from array
myArray.splice(3, 1);

您可能需要使用过滤器函数。例如:

[1,2,3,4].filter(x => x != 2)

从数组中删除值为2的项

它必须迭代数组以找到您想要按值删除的元素。所以答案是否定的。

你可以欺骗它，让它不知道它是怎么做的，但最终它还是要找到你想要删除的值所在的元素。如果数组被排序，有一些方法可以优化搜索。

在Vue 1中有一个$remove方法在数组中，您可以传递引用。

this.items.$remove(item)

我想这在Vue 2中已经消失了。您可以使用indexOf来代替循环。比如:

var index = this.items.indexOf(item);
if (index > -1) {
  this.items.splice(index, 1)
}

我也有同样的问题，我把:key放在v-for

相关文章：