как удалить (удалить) определенный элемент в массиве объектов

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);
 }