如何在模态框组件中获取条件渲染笔记的ID以实现确认删除？

核心思路是先存储要删除的笔记ID，再在模态框确认后使用这个ID执行删除，具体步骤如下：

1. 添加存储当前待删除ID的变量 #

在组件脚本里新增一个响应式变量，用来保存要删除的笔记ID：

// Vue3 示例（使用ref）
const currentNoteId = ref(null);

2. 点击打开模态框时记录当前笔记ID #

修改笔记渲染代码里的点击事件，打开模态框的同时把当前note.id赋值给currentNoteId：

<div @click="modalType=false; modalVisible=true; currentNoteId = note.id;">
  <!-- 你的删除按钮内容 -->
</div>

3. 修改模态框的删除事件绑定 #

把模态框组件的@deleteItem绑定改成使用存储好的currentNoteId，同时在关闭模态框时重置ID避免误操作：

<DeleteModal
  :modalVisible="modalVisible"
  :restore="modalType"
  @closeModal="modalVisible = false; currentNoteId = null;"
  @deleteItem="deleteNote(currentNoteId)"
  @restoreItem="restore()"
/>

4. 保留原有删除方法逻辑 #

你的deleteNote方法无需修改，保持原有逻辑即可：

const deleteNote = (id) => {
  Inertia.delete(route('notes.destroy', id));
  getNotes();
};

修改完成后，点击笔记的删除按钮会先存储对应ID，模态框确认删除时就能拿到正确的ID执行操作了。

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