vue.js - Instance of v-dialog is generated twice – Vuetify

Question

I have a problem with <v-dialog> that appears everywhere in my Vue.js application using Vuetify.js.

Every <v-dialog> is loading twice on the page. You can see it by looking at how it appears:

If I close one dialog the other dialog stays visible and works exactly like the first. It seems like Vue is generating two instances of it.

The code of the dialog isn't the issue, I think:

<v-dialog
    v-model="dialog"
    persistent
    hide-overlay
    no-click-animation
>
    <v-card>
        <v-card-title>Text</v-card-title>
        <v-card-text>
            <p class="subtitle-1">Some more text</p>
        </v-card-text>
        <v-card-actions>
            <v-spacer></v-spacer>
            <v-btn
                color="primary"
                depressed
            >
                Next
                <v-icon right>mdi-chevron-right</v-icon>
            </v-btn>
        </v-card-actions>
    </v-card>
</v-dialog>

The v-model is declared in data():

export default {
  data() {
    return {
      dialog: true,
    };
  },
}

Any help is appreciated! Thanks.

question from:https://stackoverflow.com/questions/66068127/instance-of-v-dialog-is-generated-twice-vuetify

Answer 1

Waitting for answers