vue dialog doesn't close/hide-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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 are using the prop value of your custom dialog component to handle the v-dialog v-model. You can close the dialog in two ways.

Closing the dialog from the parent component by setting up your showItemChooser to false. As you're doing on your example. Which I think it's not working because you declared your rowClick method without parentheses in your child component.

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;
      },

Closing the dialog from the child component. Since you're using the computer property show on the v-model of your v-dialog. You can close the dialog by simply setting the show value to 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.