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

Question

I want to use a delete function to remove a specific object in an array.

I tried the splice() method but it removes just the first array no matter which objects I clicked on

Here is the code for object with a v-for method

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

here is the 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);
 }
}

};

How can I construct the method

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

to delete the specific object?

Answer 1

To use splice() you should be passing the index of the item as parameter. To remove an item based on a property, consider using filter() instead.

Template should be:

<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>

And the method:

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

It will return a copy of the array without the items where skill.id !== id evaluates to false .

Answer 2

you should pass the index :

array.splice( index , howmany, item1, ....., itemX)

splice

<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>

so :

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