Vuetify.js:当我关闭并再次打开时，v-dialog 不起作用

Question

我为我的项目使用了 Vuetify.js
当我使用 v-dialog 组件时，我遇到了关闭 v-dialog 并再次打开的问题。
这是我的代码。<div @click="dialog=true">click here</div>

<v-dialog v-model="dialog">
    <alert-popup />
</v-dialog>


data() {
return {
  dialog : false
 }

这是我第一次打开对话框时的工作，但是当我再次打开时只能看到不透明的黑色页面
我不知道哪个部分是错误的。请回答这个问题。谢谢

Answer 1

您没有提供任何代码来重现该行为。但我猜你需要提供 <v-card>对话框组件内的组件。如果你不提供它只是显示不透明度问题。放置 v-card将消除不透明度问题。

 <div id="app">
  <v-app id="inspire">
    <v-container>
      <v-row justify="start">
        <v-btn @click="openDialog">Open</v-btn>

        <v-dialog v-model="dialog" max-width="300px">

          <v-card>
            <v-card-title>My Dialog</v-card-title>
            <v-divider></v-divider>
            <v-card-text>
              This is text for dialog
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-btn x-small color="blue darken-1" text @click="dialog = false">Close</v-btn>
              <v-btn x-small color="blue darken-1" text @click="dialog = false">Save</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
      </v-row>
    </v-container>
  </v-app>
</div>

这是 working code哪里有 v-card内部组件 v-dialog .
我还看到您使用了一个名为 alert-popup 的自定义组件。内 v-dialog .如果是这种情况，则需要对其进行一些重构以实现您正在寻找的内容。

创建一个单独的组件，除了 <v-dialog> .

从 <alert-popup> 发出关闭事件组件，以便打开/关闭和单击打开不会导致问题。

HTML:

 <div id="app">
  <v-app id="inspire">
    <v-container>
      <v-row justify="start">
        <v-btn @click="openDialog">Open</v-btn>
        <alert-popup :dialog="dialog" @close="closeMyDialog" />
      </v-row>
    </v-container>
  </v-app>
</div>

Javascript:

 let AlertPopup = Vue.component("AlertPopup", {
  props: {
    dialog: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    open: false
  }),

  methods: {
    close() {
      this.open = false;
      this.$emit("close");
    }
  },
  watch: {
    dialog(value) {
      this.open = value;
    }
  },
  created() {
    this.open = this.dialog;
  },
  template: `
    <v-dialog v-model="open" max-width="300px">

          <v-card>
            <v-card-title>My Dialog</v-card-title>
            <v-divider></v-divider>
            <v-card-text>
              This is text for dialog
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-btn x-small color="blue darken-1" text @click="close">Close</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
`
});
new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  components: {
    AlertPopup
  },
  data: (vm) => ({
    dialog: false
  }),

  computed: {},
  methods: {
    closeMyDialog() {
      this.dialog = false;
    },
    openDialog() {
      this.dialog = true;
    }
  }
});

如果看 AlertPopup组件，它只需要一个名为 dialog 的 Prop ，我们可以从主组件传递，当按钮被点击时，它设置为 true，这会触发 AlertPopup成分。
笔记:
如果我们不发出 关闭 事件来自 AlertPopup组件，则模式对话框将不会在第二次之后打开。这种行为的原因是，当从父组件单击按钮时，会将对话框设置为 true 并将其传递给 AlertPopup以及在 AlertPopup 内发生的任何事情留在该组件内和 dialog父组件的属性永远不会改变。
这是一个 working example模态组件如何从父组件触发。如果我们删除 close事件，它不会第二次打开模态。

Update: It turns out we are unnecessary complicating things, we don'teven need to emit an event, we can pass in the close function as aprop and react to that, whenever the close button is clicked, it wouldcall the closeAlert().

感谢@Pratik149 指出错误，我已经附加了 click 外部事件处理程序。
这是完全重构的代码。

    <div id="app">
    <v-app id="inspire">
    <v-container>
      <v-row justify="start">
        <v-btn @click="openDialog">Open</v-btn>
        <alert-popup :dialog="dialog" @close="closeMyDialog" :close="closeMyDialog" />
      </v-row>
    </v-container>
  </v-app>
</div>

并且组件逻辑更新如下

let AlertPopup = Vue.component("AlertPopup", {
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    close: {
      type: Function,
      default: () => {}
    }
  },
  data: () => ({
    open: false
  }),

  methods: {
    closeAlert() {
      this.close();
    }
  },

  template: `
    <v-dialog v-model="dialog" max-width="300px" @click:outside="closeAlert">

          <v-card>
            <v-card-title>My Dialog</v-card-title>
            <v-divider></v-divider>
            <v-card-text>
              This is text for dialog
            </v-card-text>
            <v-divider></v-divider>
            <v-card-actions>
              <v-btn x-small color="blue darken-1" text @click="closeAlert">Close</v-btn>
            </v-card-actions>
          </v-card>
        </v-dialog>
`
});
new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  components: {
    AlertPopup
  },
  data: (vm) => ({
    dialog: false
  }),

  computed: {},
  methods: {
    closeMyDialog() {
      debugger;
      this.dialog = false;
    },
    openDialog() {
      this.dialog = true;
    }
  }
});

最后这里是更新的 codepen