No puedo cerrar u ocultar mi vue-dialog y no sé por qué. Este es mi archivo js desde el que llamo al cuadro de diálogo:
<ItemChooserDialog v-model="showItemChooser" @onItemSelected="onStockSelected" /> export default { data() { return { showItemChooser: false, } }), methods: { chooseItem(context) { var self = this; self.showItemChooser = true; }, onStockSelected(result) { var self = this; let id = result.id; let name = result.name; self.showItemChooser = false; }, }y este es mi diálogo:
<template> <v-dialog v-model="show" max-width="600"> ... </v-dialog> </template> computed: { show: { get () { return this.value }, set (value) { this.$emit('input', value) } } }, props: { value: Boolean }, methods: { rowClick{ this.$emit('onItemSelected', clicked_item); } }Si elijo un elemento en el cuadro de diálogo, se ejecuta el método de devolución de llamada "onStockSelected" del archivo js y self.showItemChooser se establece en falso, pero el cuadro de diálogo aún está visible.
No tiene ningún código que realmente oculte el diálogo. La forma más común de ocultar/mostrar condicionalmente un elemento es usar la directiva v-if .
En su elemento de diálogo:
<template> <v-dialog v-if="value" v-model="show" max-width="600"> ... </v-dialog> </template>Verifique este codesandbox que hice: https://codesandbox.io/s/stack-70146776-6tczf?file=/src/components/ItemChooserDialog.vue
Puedo ver que puede tomar como ejemplo una de mis respuestas anteriores. En este caso, ya que está utilizando el valor prop de su componente de diálogo personalizado para manejar el modelo v-dialog. Puede cerrar el cuadro de diálogo de dos formas.
También en mi ejemplo, decidí usar kebab-case en el nombre de mi evento, pero eso es solo una convención de eslint. Todo lo demás se ve bien.
onStockSelected(result) { var self = this; let id = result.id; let name = result.name; self.showItemChooser = false; }, closeFromChild() { this.show = false }Por último, pero no menos importante, los v-dialog se cierran por defecto si hace clic fuera del cuadro de diálogo. Si desea evitar esta funcionalidad, puede configurar el accesorio persistente en su diálogo como lo hice en mi ejemplo.