javascript - 如何删除(删除)对象数组中的特定项目

Question

我想使用删除函数删除数组中的特定对象。

我尝试了 splice() 方法，但无论我点击了哪个对象，它都只会删除第一个数组

这是带有 v-for 方法的对象的代码

 <li v-for=" skill in skills" :key="skill.id">
        {{skill.skill}}
        <i class="fa fa-minus-circle v-on:click="remove(skill)"></i>
      </li>

这是 Skill.vue

 <script>
import uuid from "uuid";
export default {
  name: "Skills",
  data() {
   return {
  skill: "",
  skills: [
    { id: uuid.v4(), skill: "Vue.js" },
    {
      id: uuid.v4(),
      skill: "Javascript"
    },
    {
      id: uuid.v4(),
      skill: "Rails"
    }
  ]
 };
},
methods: {
addSkill() {
  this.$validator.validateAll().then(result => {
    if (result) {
      this.skills.push({ skill: this.skill, id: uuid.v4() });
      this.skill = "";
    }
  });
},
remove(id) {
  this.skills.splice(id, 1);
 }
}

};

如何构造方法

remove(id) {
  this.skills.splice(id, 1);
 }

删除特定对象？

Answer 1

要使用splice()，您应该将项目的索引作为参数传递。要根据属性删除项目，请考虑改用 filter()。

模板应该是:

<li v-for="skills in skill" :key="skill.id">
  {{skill.skill}}
  <i class="fa fa-minus-circle v-on:click="remove(skill.id)"></i>
</li>

方法:

remove(id) {
  this.skills = this.skills.filter(skill => skill.id !== id);
}

它将返回一个数组副本，不包含 skill.id !== id 计算结果为 false 的项目。