Как сделать так, чтобы моя кнопка удаления удаляла одну строку данных?

Question

Что я делаю не так? Я пытаюсь получить кнопку удаления, чтобы удалить данные одного человека.

<li v-for="(person,index) in persons">
  <span v-for="value in person"> {{ value }} </span>
  
</li>
 <button @click.native="deleteQuote">
  Delete
  </button>

  data: {
    ingredients: ['meat', 'fruit', 'salad'],
    persons: [
    {name: 'Max', age: 27, color: 'red'},
    {name: 'Mit', age: 47, color: 'red'},
    {name: 'Foo', age: 37, color: 'red'},
    ]
  },
  methods: {
    deleteQuote: function(person) {
        this.persons.splice(index, 1);
    }
  }
})

Answer 1

Поместите элемент кнопки в тег li, удалите модификатор native и передайте index в качестве параметра методу deleteQuote:

<li v-for="(person,index) in persons">
  <span v-for="value in person"> {{ value }} </span>
   <button @click="deleteQuote(index)">
      Delete
  </button>
</li>

метод должен быть определен с помощью index в качестве параметра:

  methods: {
    deleteQuote: function(index) {
        this.persons.splice(index, 1);
    }
  }