VueJS: удаление динамически визуализируемого компонента в массиве методом splice () на основе предоставленного индекса не работает

Question

Контекст: Я делаю простое приложение, в котором вы можете добавлять и удалять элементы.

Проблема: Когда я нажимаю кнопку "Удалить" в указанном элементе c это происходит: он всегда удаляет последний элемент в списке, а не элемент, по которому щелкнули.

Подробности реализации: У меня есть родительский и дочерний компоненты. Дочерний компонент динамически визуализируется с помощью v-for l oop, когда массив заполняется. При нажатии кнопки «Удалить» дочерний компонент отправляет событие удаления в родительский компонент. Родительский компонент обрабатывает функцию удаления с помощью метода detach ().

Пример кода https://codesandbox.io/s/polished-pine-nnbfo

Я использую соединение () метод для удаления указанного компонента c из массива, и хотя я предоставляю индекс corect компонента, который вызвал событие удаления, он всегда удаляет последний компонент из массива, и я не знаю почему. Кто-нибудь может указать на очевидное, пожалуйста?

Answer 1

Вы используете слишком много массивов, когда вам нужен только 1 массив - массив с элементами ToDo.

<template>
  <div id="app">
    <label>
      First Name:
      <input type="text" name="firstName" v-model="firstName">
    </label>
    <label>
      Last Name:
      <input type="text" name="lastName" v-model="lastName">
    </label>
    <label>
      Email:
      <input type="email" name="email" v-model="email">
    </label>
    <button class="btn" @click="add">Send</button>

    <Todo
      v-for="(item,idx) in todoItems"
      :key="idx"
      :id="item.id"
      :first-name="item.firstName"
      :last-name="item.lastName"
      :email="item.email"
      @btnClick="detach(idx)"
    />
  </div>
</template>

<script>
import Todo from "./components/todo";

export default 
{
  name: "App",
  components: 
  {
    Todo
  },

  data() 
  {
    return {
      id: 0,
      firstName: '',
      lastName: '',
      email: '',
      todoItems: [],
    };
  },

  methods: {
    add() {
      this.todoItems.push({
        firstName: this.firstName,
        lastName: this.lastName,
        email: this.email,
        id: ++this.id,
      });
      this.firstName = '';
      this.lastName = '';
      this.email = '';
    },

    /** the delete function **/
    detach(index) 
    {
      this.todoItems.splice(index, 1);
    }
  }
};
</script>