CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Kaleem Qasim
Kaleem Qasim

Reputation: 37

Vuetify Dialog Component on a loop for confirmation of delete event

I've a project in which I've a datatable.vue which is looping through a data and showing some data table, have some button like edit, delete. What I want to achieve is in that loop, use a reusable dialog component, which will load and upon confirmation, trigger itemDelete method. the DialogComponent is 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>

this is current code of datatable, and has method deleteItem which deletes the item, I want to modify this and add reusable dialogbox (ill use this dialogbox later in other places), which will have confirmation of delete and triggers itemDelete method here.

on Vueitfy, I got this.

<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>

and I made component DialogBox of it, I'm new to Vue. Thanks

Upvotes: 1

Views: 3425

Answers (1)

mohammad
mohammad

Reputation: 521

There is better way to do this: write this in your item.action slot:

<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>

and create the deleteItem method:

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

Upvotes: 3

Related Questions