I've encountered an issue while working with a modal in Vue js. After installing vuetify to ensure correct styling, the v-dialog component stopped functioning properly – although it was working fine before.
I've diligently examined my code multiple times and can't seem to spot any discrepancies from the previous version. Could this be due to compatibility issues between different versions of v-modal and vuetify?
Here's a snippet for reference:
<template>
<v-dialog v-model="dialog" persistent max-width="600px">
<template v-slot:activator="{ on, attrs }">
<v-btn
color="primary"
dark
v-bind="attrs"
v-on="on"
>
Open Dialog
</v-btn>
</template>
<v-card>
<v-card-title>
<span class="headline">User Profile</span>
</v-card-title>
<v-card-text>
<v-container>
<v-row>
<!-- Form fields go here -->
</v-row>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="dialog = false">Close</v-btn>
<v-btn color="blue darken-1" text @click="dialog = false">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
<script>
export default {
dialog: false
}
</script>