As my single-file component continues to grow, I decided to do some refactoring. It turns out that a couple of dialogs are making the .vue file quite large (800+ lines). To maintain a clean and organized component, I am working on transforming these dialogs into separate child components (mydialog). Although I'm using vuetify, you don't need to be familiar with it.
In the parent component, there's a button that triggers the dialog. I pass the dialog prop to the child component, which is then attached to the v-model of the dialog. The issue arises as it only works the first time. This happens because when I click the 'close' button, it sets the dialog value to false and it remains false thereafter since the communication between the child and parent component gets disconnected. How can this be resolved under such circumstances?
Here's an excerpt:
Vue.component('mydialog', {
props:{
dialog: {
type: Boolean,
default: false
}
},
template: `
<div class="text-xs-center">
<v-dialog
v-model="dialog"
width="500"
>
<v-card>
<v-card-title
class="headline grey lighten-2"
primary-title
>
A Dialog
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet,
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
color="primary"
flat
@click="dialog = false"
>
Close
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</div>
`,
data: function() {
return {
// dialog: false,
}
}
});
new Vue({
el: '#app',
data: {
dialog: false
}
});<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.css" />
</head>
<body>
<div id="app">
<v-app id="inspire">
<v-btn color="red lighten-2" dark @click="dialog=true">Click Me</v-btn>
<mydialog :dialog="dialog"></mydialog>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.2.0/vuetify.min.js"></script>
</body>
</html>