I can't close or hide my vue-dialog and I don't know why. This is my js file from which I call the dialog:
<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;
},
}
and this is my Dialog:
<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);
}
}
If I choose an item in the dialog the callback-method "onStockSelected" of the js file runs and self.showItemChooser is set to false but the dialog is still visible.
You don't have any code that actually hides the dialog. The most common way to conditionally hide/show an element is to use the v-if directive.
On your dialog element:
<template>
<v-dialog v-if="value" v-model="show" max-width="600">
...
</v-dialog>
</template>
Check this codesandbox I made: https://codesandbox.io/s/stack-70146776-6tczf?file=/src/components/ItemChooserDialog.vue
I can see you may took as example one of my previous answers. In this case, since you're using the prop value of your custom dialog component to handle the v-dialog v-model. You can close the dialog in two ways.
Also on my example I decided to use kebab-case on my event name but that just a convention from eslint. Everything else looks alright.
onStockSelected(result) {
var self = this;
let id = result.id;
let name = result.name;
self.showItemChooser = false;
},
closeFromChild() {
this.show = false
}
Last but not least, v-dialog's by default close themselves if you click outside the dialog. If you want to avoid this functionality you can set the persistent prop to your dialog as I did on my example.