I previously had a Vuetify dialog setup in my location view to delete a location from a list. Now, I have a second list for Users that requires the same functionality and dialog. This seemed like a good opportunity to refactor and move my delete dialog into a component. It was working fine before, but when I moved it into a component, something seems to be missing. Any suggestions?
<template>
<v-dialog
v-model="dialogDelete"
max-width="500px"
persistent
>
<v-card>
<v-card-title class="headline">
Delete location
</v-card-title>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
@click="closeDeleteDialog"
>
Cancel
</v-btn>
<v-btn
v-if="permissions.locations.delete"
@click="deleteItem"
>
Delete
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
Next is my script:
data: () => ({
dialog: false,
dialogDelete: false
},
methods: {
deleteItem () {
this.$store.dispatch('deleteFirebaseDoc', { docId: this.locationId, collection: 'locations' })
this.locationId = null
this.dialogDelete = false
},
deleteItemConfirm (item) {
this.locationId = item.docId
},
closeDeleteDialog () {
this.dialogDelete = false
} }
After moving this into a components, I encounter no errors, but the dialog doesn't appear:
<DeleteDialog v-model="dialogDelete" title="Delete location?"/>
The script remains the same as above, but now I'm including my new component:
components: {
DeleteDialog: () => import('@/components/Shared/DeleteDialog')
},
Here's how I've set up my DeleteDialog.vue component:
<template>
<v-dialog
max-width="500px"
persistent
>
<v-card>
<v-card-title
class="headline"
>
<slot name="header">
{{ title }}
</slot>
</v-card-title>
<v-card-text>
<slot name="body">
{{ message }}
</slot>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn
color="grey darken-1"
text
@click="$emit(closeDeleteDialog)"
>
Cancel
</v-btn>
<v-btn
color="primary darken-1"
text
@click="$emit(deleteItem)"
>
Delete
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
name: 'DeleteDialog',
props: {
title: {
type: String,
required: true
},
message: {
type: String,
default: ''
}
},
emits: ['closeDeleteDialog', 'deleteItem']
}
</script>