vue 对话框没有 close/hide

Question

我无法关闭或隐藏我的 vue-dialog，我不知道为什么。这是我调用对话框的 js 文件：

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

这是我的对话：

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

如果我在对话框中选择一个项目，js 文件的回调方法“onStockSelected”运行并且 self.showItemChooser 设置为 false 但对话框仍然可见。

Answer 1

您没有任何实际隐藏对话框的代码。有条件地 hide/show 元素的最常见方法是使用 v-if directive.

在您的对话框元素上：

<template>
    <v-dialog v-if="value" v-model="show" max-width="600">
      ...
    </v-dialog>
</template>

Answer 2

检查我制作的这个codesandbox：https://codesandbox.io/s/stack-70146776-6tczf?file=/src/components/ItemChooserDialog.vue

我看你可能拿我之前的一个回答举例了。在这种情况下，因为您正在使用自定义对话框组件的属性 value 来处理 v-dialog v-model。您可以通过两种方式关闭对话框。

通过将 showItemChooser 设置为 false 从父组件关闭对话框。正如您在示例中所做的那样。我认为它不起作用，因为您在子组件中声明了没有括号的 rowClick 方法。

另外，在我的示例中，我决定在我的事件名称中使用 kebab-case，但这只是 eslint 的约定。其他一切看起来都很好。

      onStockSelected(result) {
        var self = this;
        let id = result.id;
        let name = result.name;
        self.showItemChooser = false;
      },

正在从子组件关闭对话框。由于您在 v-dialog 的 v-model 上使用计算机属性 show。您只需将显示值设置为 false 即可关闭对话框。

    closeFromChild() {
      this.show = false
    }

最后但同样重要的是，如果您在对话框外单击，v-dialog 默认情况下会自行关闭。如果你想避免这个功能，你可以像我在我的例子中所做的那样为你的对话框设置 persistent 属性。

vue 对话框没有 close/hide

vue dialog doesn't close/hide

javascript

vue.js

vuetify.js