vue dialog doesn’t close/hide

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.

Answer

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>

Advertisement

Answer