Javascript VueJS：根据提供的索引，使用splice（）方法删除数组中的平面渲染组件，不'；行不通

上下文： 我正在制作一个简单的todo应用程序，您可以在其中添加和删除项目

问题： 当我在特定项目上单击“删除”按钮时，会发生这种情况：它总是删除列表中的最后一个项目，而不是单击的项目

实施细节： 我有一个父组件和子组件。填充数组时，子组件在v-for循环的帮助下进行动态渲染。单击按钮“删除”时，子组件向父组件发出删除事件。父组件使用“detach（）”方法处理删除功能

代码示例

---

我使用splice（）方法从数组中删除特定组件，虽然我提供了触发删除事件的组件的corect索引，但它总是从数组中删除最后一个组件，我不知道为什么。有人能指出明显的问题吗？

当您只需要一个数组时，您使用的数组太多了—即包含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>

名字：
姓氏：
电邮：
发送
从“/components/Todo”导入Todo；
导出默认值
{
名称：“应用程序”，
组件：
{
待办事项
},
数据（）
{
返回{
id:0，
名字：''，
姓氏：“”，
电子邮件：“”，
待办事项：[]，
};
},
方法：{
添加（）{
这个。todoItems。推({
名字：这个，名字，
lastName:this.lastName，
电子邮件：this.email，
id:++this.id，
});
this.firstName=''；
this.lastName=''；
this.email=''；
},
/**删除函数**/
分离（索引）
{
这个.todoItems.splice（索引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>

名字：
姓氏：
电邮：
发送
从“/components/Todo”导入Todo；
导出默认值
{
名称：“应用程序”，
组件：
{
待办事项
},
数据（）
{
返回{
id:0，
名字：''，
姓氏：“”，
电子邮件：“”，
待办事项：[]，
};
},
方法：{
添加（）{
这个。todoItems。推({
名字：这个，名字，
lastName:this.lastName，
电子邮件：this.email，
id:++this.id，
});
this.firstName=''；
this.lastName=''；
this.email=''；
},
/**删除函数**/
分离（索引）
{
这个.todoItems.splice（索引1）；
}
}
};