为什么我的目标激活对话框除了表格的第一行之外没有出现？

Question

我正在使用 Vue 3 和 Vuetify 3。我试图让我当前的应用程序在其自己的组件中的对话框中显示

<v-data-table

中的一行，但它无法正常工作：将出现对话框如果我单击表第一行的 Actions3 列中的删除图标，但不单击 Actions3 列中的任何其他删除按钮。这个游乐场说明了问题。

一点背景信息，这个应用程序的初始版本只有一个删除按钮，即“操作”列中的按钮。它的工作是立即删除表中已按下删除按钮的行。这很有效，但有点危险，因为用户可能没有意识到这是一个删除按钮，并且可能对用它删除一行感到不满意，所以我添加了 Actions2 列，该列也为每行都有一个删除按钮。 Actions2 列中的按钮会显示一个对话框，其中显示该行的内容，并让用户选择确认删除或取消删除。这完全按照设计工作。但我对我使用的方法并不着迷，因为我必须为可组合项编写一个额外的模块来控制对话框的打开和关闭，所以我添加了 Actions3 按钮并编写它，以便它将使用目标激活显示该行内容并提供相同的两个按钮的对话框，一个用于确认删除，另一个用于取消删除。

这就是麻烦所在。Actions3 列中的按钮仅显示表格第一行的对话框，因此这是我唯一可以删除的行。我需要为 Actions3 列中的每个删除按钮显示对话框，而不仅仅是第一个。

重要提示：所有三列中实际删除行中数据的代码已被删除，因此按对话框中的任何红色垃圾桶或红色删除按钮都是完全安全的；不会丢失任何实际数据。

如果我能让所有 Actions3 按钮正常工作，我计划从表中删除 Actions 和 Actions2 列。我希望你能帮忙。

更新： 我尝试按照莫里茨在评论中建议的方式进行编码，但显然我做错了，因为

ConfirmDelete2

列中的任何按钮都没有出现

Actions3

对话框。这是我修改后的playground，以防有人可以帮助我找出哪里出了问题。

Answer 1

我建议使用该项目来触发对话框：

• 激活器仅将

  selectedItem

  设置为当前项目（我会使用 VBtn 而不是 VIcon）：

<v-btn
  icon="mdi-delete"
  variant="plain"
  @click="event => selectedItem = item"
/>

• ConfirmDelete2 以一个 item 作为模型，其余的 props 被删除，因为数据可以直接通过 item 访问：

// in ConfirmDelete2 setup 

type Item = {...}
const model = defineModel<Item|null>()

• 无论何时设置模型，VDialog 都应该出现。由于对话框中使用了项目数据，因此使用

  v-if

  而不是

  :modelValue="Boolean(model)"

  可以避免

  model is null

  错误：

<v-dialog
  v-if="model"
  :modelValue="true"
  ...

• 删除后，取消设置

  model

  以关闭模态框：

const deleteRecord = () => {
  ...
  model.value = null // <--- defineModel emits `update:modelValue`
}

• 现在父级可以简单地使用

  v-model

  来传递

  selectedItem

  ，当对话框关闭时它将被取消设置（由

  v-model

  更新）

<ConfirmDelete2 v-model="selectedItem" />

这里是更新后的游乐场。

希望有帮助！如果有不清楚的地方请告诉我。