Parent component:
<template>
<v-btn v-on:click="dialog = !dialog">
</v-btn>
</template
<script>
export default {
data: () => ({
dialog: false
}
</script
Child component:
<template>
<v-layout>
<v-dialog v-model="toggledialog">
<v-btn color="green darken-1" flat="flat"
@click.native="toggledialog = false">Close</v-btn>
</v-dialog>
</v-layout>
</template>
<script>
export default {
data: () => ({
toggledialog: false,
}),
watch: {
dialog: function(){
this.toggledialog = true
},
},
props:['dialog']
}
</script>
This code works but I am not a fan of using the watch workaround.
Questions:
- Is there a way to open the dialog in the child component without using
props['dialog']for
tov-model="toggledialog"</li> <li>How can I update the parent component's <code>dialogfalsewhen it is changed in the child component withv-model="dialog", considering that Vue JS does not allow direct modification of props?