Vue JS：使用基于提供的索引的 splice() 方法删除数组中动态渲染的组件，不起作用

Posted 2023-02-23

【中文标题】Vue JS：使用基于提供的索引的 splice() 方法删除数组中动态渲染的组件，不起作用

【英文标题】：VueJS: Deleting dinamically rendered component in array with splice() method based on provided index, doesn't work

【发布时间】：2020-05-24 21:47:30

【问题描述】：

背景： 我正在制作一个简单的待办事项应用程序，您可以在其中添加和删除项目。

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

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

代码示例 https://codesandbox.io/s/polished-pine-nnbfo

我正在使用 splice() 方法从数组中删除特定组件，虽然我提供了触发删除事件的组件的正确索引，但它总是从数组中删除最后一个组件，而我没有知道为什么。有人可以指出明显的吗？

【参考方案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>