时间戳

首页 > 解决方案 > Vuetify 对话框组件以正确从父组件中删除项目

javascript - Vuetify 对话框组件以正确从父组件中删除项目

问题描述

我有一个删除对话框组件，当单击取消或删除时没有任何反应，甚至没有错误。我错过了什么才能正确删除或取消

<template>
  <v-dialog
    v-bind="$attrs"
    v-on="$listeners"
    max-width="500px"
    persistent
  >
    <v-card>
      <v-card-title
        class="headline"
      >
        {{ title }}
      </v-card-title>
      <v-card-text>
        {{ message }}
      </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>

这就是我使用组件的方式：

        <DeleteDialog
          v-model="dialogDelete"
          title="Delete location"
          message="Are you sure you want to delete this location?"
        />

在与我导入组件的位置相同的视图中，我有我的方法。

export default {
  components: {
    DeleteDialog: () => import('@/components/Shared/DeleteDialog'),
  },
  data: () => ({
    locationId: null,
    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
    }
  }
}
</script>

如何正确访问我的组件以删除和项目或取消对话框？

标签： javascriptvue.js

解决方案

在父组件中，您需要监听您发出的那些事件

<DeleteDialog
  v-model="dialogDelete"
  title="Delete location"
  message="Are you sure you want to delete this location?"
  @close-delete-dialog="dialogDelete = false" // or call closeDeleteDialog () 
  @delete-item="deleteItem()"
/>

我从来没有使用过camelCase来发出事件，所以我宁愿这样$emit('close-delete-dialog')写$emit('delete-item')

推荐阅读