Удалить элемент из массива в VueJS дочернем компоненте

Question

Я учусь VueJS, поэтому этот пример может показаться надуманным, но терпите меня. Я учусь, как работают компоненты.

Проблема в том, что я не могу получить кнопку Удалить в каждой строке, чтобы удалить соответствующий элемент из массива (я использую соединение). Вместо этого он всегда удаляет первый элемент из массива. Что я делаю неправильно?

Вот файл HTML:

<div id="app">
    <p>Tasks: {{ count }}</p>
    <input v-model="task">
    <button v-on:click="addItem">Add Item</button>
    <button v-on:click="clearAll">Clear All</button>

    <ul>
        <todo-item
            v-for="(item, index) in todos"
            v-bind:todo="item"
            v-bind:key="item.id"
            v-on:delete-item="deleteItem"
        ></todo-item>
    </ul>
</div>

Вот файл JS:

const tasks = [
  { id: 0, text: 'Clean the house' },
  { id: 1, text: 'Order groceries' },
  { id: 2, text: 'Build an app' }
];

Vue.component('todo-item', {
  props: ['todo'],
  methods: {
  },
  template: `
    <li>
      {{ todo.text }} 
      <button type="button" v-on:click="$emit('delete-item')">Delete</button>
    </li>
  `
});

var app = new Vue({
  el: '#app',
  data: {
    task: '',
    todos: tasks
  },
  computed: {
    count() {
      return this.todos.length;
    }
  },
  methods: {
    addItem () {
      if (this.task) {
        this.todos.push({ id: this.todos.length, text: this.task });
        this.task = '';
        this.count++;
      }
    },

    deleteItem (index) {
      this.todos.splice(index, 1);
      this.count--;
    },

    clearAll() {
      this.todos = [];
    }
  }
});

Answer 1

Вы запускаете событие delete-item, но никогда не предоставляете своему родительскому компоненту информацию о том, какой todo-элемент должен быть удален.

Я предлагаю передать идентификатор элемента в событии, выполнив <button type="button" v-on:click="$emit('delete-item', todo.id)">Delete</button>

Идентификатор будет передан в метод deleteItem в качестве параметра. В качестве альтернативы вы можете передать индекс компоненту элемента в качестве реквизита и использовать индекс вместо идентификатора, чтобы определить элемент, который нужно удалить (например, то, что вы пытаетесь сделать сейчас).