循环上的 Vuetify 对话框组件以确认删除事件答案

【问题标题】：Vuetify Dialog Component on a loop for confirmation of delete event循环上的 Vuetify 对话框组件以确认删除事件
【发布时间】：2020-09-28 10:43:47
【问题描述】：

我有一个项目，其中有一个 datatable.vue，它循环数据并显示一些数据表，有一些按钮，如编辑、删除。我想要实现的是在该循环中，使用可重用的对话框组件，该组件将加载并在确认后触发 itemDelete 方法。 DialogComponent 是 vuetifiy (v-dialog)。

<template v-slot:item.action="{ item }">
    <v-btn icon color="blue" :to="{ path: updatePath, query: { id: item.id } }">
        <v-icon small>mdi-pencil</v-icon>
    </v-btn>
    <v-btn icon color="red" @click="$emit('deleteItem', item)">
        <v-icon small>mdi-delete</v-icon>
    </v-btn>
</template>

这是数据表的当前代码，并且有删除项目的方法deleteItem，我想修改它并添加可重用对话框（稍后在其他地方使用此对话框），它将确认删除并在此处触发itemDelete方法.

在 Vueitfy 上，我知道了。

<v-dialog
  v-model="dialog"
  width="500"
>
<template v-slot:activator="{ on, attrs }">
    <v-btn
      color="red lighten-2"
      dark
      v-bind="attrs"
      v-on="on"
    >
      Click Me
    </v-btn>
  </template>

  <v-card>
    <v-card-title
      class="headline grey lighten-2"
      primary-title
    >
      Confirmation
    </v-card-title>

    <v-card-text>
      Are you sure?
    </v-card-text>

    <v-divider></v-divider>

    <v-card-actions>
      <v-spacer></v-spacer>
      <v-btn
        color="primary"
        text
        @click="dialog = false"
      >
        Confirm
      </v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

我制作了它的组件对话框，我是 Vue 的新手。谢谢

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

有更好的方法来做到这一点：把这个写在你的item.action 槽中：

<template v-slot:item.action="{ item }">
    <v-btn icon color="blue" :to="{ path: updatePath, query: { id: item.id } }">
        <v-icon small>mdi-pencil</v-icon>
    </v-btn>


     <v-dialog v-model="dialog" width="500">
        <template v-slot:activator="{ on, attrs }">
            <v-btn
              color="red lighten-2"
              dark
              icon
              v-bind="attrs"
              v-on="on"
            >
              <v-icon small>mdi-delete</v-icon>
            </v-btn>
          </template>

          <v-card>
            <v-card-title
              class="headline grey lighten-2"
              primary-title
            >
              Confirmation
            </v-card-title>

            <v-card-text>
              Are you sure?
            </v-card-text>

            <v-divider></v-divider>

            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn
                color="primary"
                text
                @click="deleteItem(item)"
              >
                Confirm
              </v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
</template>

并创建deleteItem 方法：

    method:{
    createItem(item){
        this.$emit('deleteItem', item);
        this.dialog = false;
    }
}

【讨论】：