vue.js - 尽管 value 属性等于 true，但 Vuetify v-dialog 不显示

Question

我正在使用 vuex 商店状态v-dialog在我的 NuxtJS 应用程序中显示/隐藏 Vuetify。以下是代码摘录：

Vuex商店：

export const state = () => ({
  dialogOpen: false
});

export const mutations = {
  setDialogToOpen(state) {
    state.dialogOpen = true;
  },
  setDialogToClosed(state) {
    state.dialogOpen = false;
  }
};
export const getters = {
  isDialogOpen: state => {
    return state.dialogOpen;
  }
};

对话框组件：

<v-dialog
  v-model="isDialogOpen"
  @input="setDialogToClosed"
  max-width="600px"
  class="pa-0 ma-0"
>
...
</v-dialog>

computed: {
  ...mapGetters("store", ["isDialogOpen"])
},
methods: {
  ...mapMutations({
    setDialogToClosed: "store/setDialogToClosed"
  })
}

这一切都很好，但是当我从一个页面重定向到另一个页面时，它会停止工作。

this.$router.push("/videos/" + id);

我点击浏览器刷新，它又开始工作了。使用 Chrome Vue 开发工具，我可以看到状态在 store 以及 v-dialog value 属性中设置正确，如下所示

在 Vuex 商店中

在v-dialog组件属性中

然而对话框是不可见的。任何线索发生了什么？

我正在使用NuxtJS 2.10.2和@nuxtJS/Vuetify plugin 1.9.0

Answer 1

问题是由于v-dialog没有被包裹在里面v-app

我的代码结构是这样的

默认布局

<template>
  <div>
    <v-dialog
      v-model="isDialogOpen"
      @input="setDialogToClosed"
      max-width="600px"
      class="pa-0 ma-0"
    >
    <nuxt />
  </div>
</template>

下面是索引页面的代码，它nuxt在运行时替换上面的标签。

<template>
  <v-app>
    <v-content>
      ...
    </v-content>
  </v-app>
</template>

所以，在最后的代码v-dialog里面并没有被包裹v-app。将v-app标签移动到default布局修复了它

<template>
  <v-app>
    <v-dialog
      v-model="isDialogOpen"
      @input="setDialogToClosed"
      max-width="600px"
      class="pa-0 ma-0"
    >
    <nuxt />
  </v-app>
</template>