CODEWITHSUNDEEP
vue.jsdialogvuetify.jsvue-reactivity
Meena Chaudhary
Meena Chaudhary

Reputation: 10665

Vuetify v-dialog do not show in spite of value attribute equal to true

I am using vuex store state to show/hide Vuetify v-dialog in my NuxtJS app. Following are the code excerpt:

Vuex Store:

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

Dialog Component:

<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 all works fine but when I redirect from one page to another page like below it stops working.

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

I hit browser refresh and it starts working again. Using the Chrome Vue dev tools, I can see the state is set correctly in the store as well as in the v-dialog value property as shown below

In Vuex store

enter image description here

In v-dialog component property

enter image description here

Yet the dialog is not visible. Any clue what is happening?

I am using NuxtJS 2.10.2 and @nuxtJS/Vuetify plugin 1.9.0

Upvotes: 0

Views: 1414

Answers (1)

Meena Chaudhary
Meena Chaudhary

Reputation: 10665

Issue was due to v-dialog not being wrapped inside v-app

My code was structured like this

default layout

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

Below is the code for index page which replaces nuxt tag above at runtime.

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

So, in the final code v-dialog was not wrapped inside v-app. Moving v-app tag to default layout fixed it

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

Upvotes: 1

Related Questions