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

Posted

技术标签:

【中文标题】Vue JS如何根据数组值删除对象【英文标题】:Vue JS how to delete object based on array values 【发布时间】:2020-01-26 12:20:28 【问题描述】:

我有一个对象数组,例如:

types: [

 id: 1,
 name: "Hello"
,

 id: 2,
 name: "World"
,

 id: 3,
 name: "Jon Doe"

]

我也有一个像这样的简单数组:

selected_types = [1, 2]

所需的结果应过滤 "types" 数组并排除 "selected_types" 数组中存在的所有 id,如下所示:

final_types: [

 id: 3,
 name: "Jon Doe"

]

我完全不知道如何实现这一点,但以下是我的尝试:

   this.types.filter(obj => 
        for (let i = 0; i < this.selected_types.length; i++) 
          if (obj.id !== selected_types[i]) 
            final_types.push(attribute);
          
        
      );

【问题讨论】:

【参考方案1】:

只需使用this.types.filter((id) =&gt; !this.selected_types.includes(id)):

let types = [
    id: 1,
    name: "Hello"
  ,
  
    id: 2,
    name: "World"
  ,
  
    id: 3,
    name: "Jon Doe"
  
]

let selected_types = [1, 2];
let resArr = types.filter((id) => !selected_types.includes(id));
console.log(resArr);

【讨论】:

不知道作者是否清楚。我建议添加 (id)let id = obj.id 相同。【参考方案2】:

可以实现Javascript的原生方法过滤,最终返回一个新对象

let types = [
    id: 1,
    name: "Hello"
  ,
  
    id: 2,
    name: "World"
  ,
  
    id: 3,
    name: "Jon Doe"
  
]

let selected_types = [1, 2];

types = types.filter(obj => 
  if (selected_types.indexOf(obj.id) === -1) 
     return obj
  
);

【讨论】:

以上是关于Vue JS如何根据数组值删除对象的主要内容,如果未能解决你的问题,请参考以下文章

delete 和vue.delete 删除数组的区别

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

vue如何监听到原生js删除dom结点

从数组中删除重复的对象

当对象中的字段发生更改时如何从 v-model 数组中删除对象

js数组删除某个元素