V-диалог Vuetify не отображается, несмотря на то, что атрибут value равен true

Question

Я использую состояние магазина vuex, чтобы показать / скрыть Vuetify v-dialog в моем приложении Nuxt JS. Ниже приведен фрагмент кода:

Магазин 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);

Я нажимаю ссылку браузера sh, и она снова начинает работать. Используя инструменты Chrome Vue dev, я вижу, что состояние правильно установлено в хранилище, а также в свойстве v-dialog value, как показано ниже

В хранилище Vuex

In 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>