Vue项目删除确认弹窗按钮重复问题及非v-for实现方案问询

问题根源 #

弹窗内出现多个确认按钮，是因为你将弹窗的按钮区域用v-for="(task, index) in tasks"包裹了，导致每一条任务都会渲染一组按钮，最终按钮数量和任务数完全一致。

修复步骤 #

1. 添加待删除任务的存储属性
   在组件data中新增属性，用来保存当前要删除的任务实例：

data() {
  return {
    // ... 其他原有属性
    taskToDelete: null, // 新增存储待删除任务的属性
  }
}

2. 修改弹窗触发逻辑，传入目标任务
   更新openDeleteModal方法，接收点击的任务并保存到taskToDelete，同时打开弹窗：

openDeleteModal(task) {
  this.taskToDelete = task;
  this.isDeleteModalOpen = true;
}

同步修改触发弹窗的删除按钮，传递当前任务：

<button @click="openDeleteModal(task)" class="transition-all duration-200 bg-red-600 hover:bg-red-700 text-white font-bold py-1 mr-2 px-3 rounded float-end">Delete</button>

3. 移除弹窗内的v-for循环
   删除弹窗按钮区域外层的v-for包裹，确保弹窗只渲染一组确认按钮。修正后的弹窗按钮代码如下：

<div class="bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
  <button @click="removeTask(taskToDelete)" type="button" class="inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm">
    Yes
  </button>
  <button @click="closeDeleteModal" type="button" class="mt-3 inline-flex justify-center rounded-md shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 sm:mt-0 sm:w-auto sm:text-sm">
    No
  </button>
</div>

4. 完善删除方法，删除后关闭弹窗
   在removeTask方法中添加关闭弹窗的逻辑，确保删除完成后弹窗自动关闭：

removeTask(task) {
  window.emitter.emit('changeLoaderStatus', true)
  axios.delete(window.location.origin + '/api/removeTask/' + task.id, this.taskData).then(response => {
      const index = this.tasks.findIndex(t => t.id === task.id);
      this.isAlertVisible = true;
      setTimeout(() => {
        this.isAlertVisible = false;
      }, 3000);
      if (index !== -1) {
        this.tasks.splice(index, 1);
      }
      this.closeDeleteModal(); // 删除成功后关闭弹窗
      window.emitter.emit('changeLoaderStatus', false)
    })
    .catch(error => {
      console.error('Error deleting task:', error);
      window.emitter.emit('changeLoaderStatus', false)
    });
}

替代实现思路（无需v-for渲染按钮） #

核心逻辑是通过组件属性跟踪当前要删除的任务，而非循环生成按钮：

• 点击任务的删除按钮时，将该任务实例存入组件的taskToDelete属性，同时打开弹窗
• 弹窗内仅保留一组固定的Yes/No按钮，点击确认时直接使用taskToDelete中的实例执行删除操作
• 这种方式既避免了循环渲染按钮的冗余问题，也能精准定位待删除任务，逻辑更简洁清晰

内容的提问来源于stack exchange，提问作者flacfile