如何删除（删除）对象数组中的特定项目

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 。

Answer 2

您应该通过索引：

array.splice（ index ，howmany，item1，.....，itemX）

拼接

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

所以：

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