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>在对话框组件内提供组件。如果您不提供它，它只会显示不透明度问题。放置 av-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>

这是工作代码，其中有一个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的道具，我们可以从主组件传递该道具，当单击按钮时，它设置为true，从而触发组件AlertPopup。

注意：如果我们不从组件发出关闭AlertPopup事件，则模式对话框将不会在第二次打开。出现这种行为的原因是，当从父组件单击按钮时，将对话框设置为 true 并将其传递给 ，并且无论组件内部AlertPopup发生什么，父组件的属性都不会改变。AlertPopupdialog

这是一个如何从父组件触发模态组件的工作示例。如果我们删除该close事件，它将不会第二次打开模式。

更新：事实证明我们没有必要使事情复杂化，我们甚至不需要发出事件，我们可以将 close 函数作为 prop 传入并对此做出反应，每当单击关闭按钮时，它都会调用 closeAlert( ）。

感谢 @Pratik149 指出错误，我已在事件处理程序之外附加了单击。

这是完全重构的代码。

    <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