用对话框中的删除按钮删除Vuetify数据表中的行。

我有一个数据表,每行都有一个编辑和删除图标。当使用下面的代码并按下删除图标时,我得到了一个系统弹出和该行删除的方式,我想它。如此完美。

        <template v-slot:item.actions="{ item }">
           <v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
           <v-icon small text @click="deleteItem(item)">mdi-delete</v-icon>
        </template>

方法脚本。

deleteItem(item) {
   const index = this.companies.indexOf(item);
   confirm("Are you sure you want to delete this item?") &&
   this.companies.splice(index, 1);
},

现在我想用一个漂亮的对话框来代替系统弹出窗口。像在 https:/codepen.ioanonpenpYzZPZ?editors=1010。.

所以我做了这段代码。

        <template v-slot:item.actions="{ item }">
      <v-icon small class="mr-2" @click="editItem(item)">mdi-pencil</v-icon>
      <v-icon small @click="dialog2 = true">mdi-delete</v-icon>
      <v-dialog v-model="dialog2" max-width="500px">
        <v-card>
          <v-card-title>Verwijderen</v-card-title>
          <v-card-text>Weet je zeker dat je {{item.name}} wenst te verwijderen?</v-card-text>
          <v-card-actions>
            <v-btn color="primary" text @click="dialog2 = false">Close</v-btn>
            <v-btn color="primary" text @click="deleteItem(item)">Verwijderen</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </template>

然后用Methods脚本:

    deleteItem(item) {
  const index = this.companies.indexOf(item);
  this.companies.splice(index, 1);
  this.dialog2 = false;
  console.log("Delete success");
},

我添加了控制台日志,看看这个按钮是否真的做了什么. 当我按下删除图标的时候,我确实得到了对话框. 当我按 “关闭 “键时,一切正常.当我按删除键时,我在控制台得到 “删除成功 “的消息,但该行没有删除.当我再次按删除键时,页面崩溃……任何想法?

解决方案:

问题是,有 多次 v-dialog 必定 dialog2 因为它在一个重复的槽内。这与单例的 window.confirm 的工作。所以,当你尝试 deleteItem(item) 要删除的项目总是数组中的最后一个。

v-dialog 画外音 v-data-table,并跟踪 itemToDelete (这种编辑方式也是一样的)。用一种方法来切换对话框,并记住这个项目….

showDeleteDialog(item) {
    this.itemToDelete = item
    this.dialogDelete = !this.dialogDelete
},
deleteItem() {
    console.log('deleteItem', this.itemToDelete)
    const index = this.items.indexOf(this.itemToDelete)    
    this.items.splice(index, 1)
    this.dialogDelete = false
},

然后模板是…

   <v-data-table>
          <template v-slot:item.actions="{ item }">
                    <div class="text-truncate">
                      <v-icon
                        small
                        class="mr-2"
                        @click="editItem(item)"
                      >
                        mdi-pencil
                      </v-icon>
                      <v-icon
                        small
                        @click="showDeleteDialog(item)"
                      >
                        mdi-delete
                      </v-icon>
                  </div>
          </template>
   </v-data-table>  

   <v-dialog v-model="dialogDelete" max-width="500px">
                <v-card>
                  <v-card-title>Delete</v-card-title>
                  <v-card-text>Weet je zeker dat je `{{itemToDelete.Name}}` wenst te verwijderen?</v-card-text>
                  <v-card-actions>
                    <v-btn color="primary" text @click="dialogDelete = false">Close</v-btn>
                    <v-btn color="primary" text @click="deleteItem()">Delete</v-btn>
                  </v-card-actions>
                </v-card>
    </v-dialog>

演示

给TA打赏
共{{data.count}}人
人已打赏
未分类

为什么在pandas中使用"=="会返回一个Series而不是bool?

2022-9-9 3:51:17

未分类

在Python中使用setuptools安装时,如何使导入的文件在控制台脚本中工作?

2022-9-9 3:51:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索