Vuetify: programming dialog
vuetify says: if you want to programmatically open or close a dialog, you can do so using a boolean v-model.
However, I have absolutely no idea what this means. Saying "using the v-model" is vague at best. The parent component is aware of the setting if it should open, but I don't understand how to dynamically change this in the child. Should I pass it using v-bind?
<login v-bind:showDialog></login>
If so, how does this child component handle this?
Information on Vuetify Dialog is here: https://vuetifyjs.com/components/dialogs
source to share
v-model
is a directive. You would use v-model
instead v-bind
.
There are some examples on the page you link to. If you click on the button <>
on the first it will show the HTML source
<v-dialog v-model="dialog">
v-model
makes a two-way snapping on a support called value
inside the component. When you set the value of the bound variable to true
, a dialog is displayed; when false
, he will hide. Also, if the dialog is rejected, it will set the variable to false.
source to share
As I understand it, you have a child component that has a dialog. Not sure if this is 100% correct, but I am implementing it. Child component with dialogue:
<template>
<v-dialog v-model="intDialogVisible">
...
</template>
<script>
...
export default {
props: {
dialogVisible: Boolean,
...
},
computed: {
intDialogVisible: {
get: function () {
if (this.dialogVisible) {
// Some dialog initialization code could be placed here
// because it is called only when this.dialogVisible changes
}
return this.dialogVisible
},
set: function (value) {
if (!value) {
this.$emit('close', some_payload)
}
}
}
in the parent component we use it:
<my-dilaog :dialogVisible="myDialogVisible"
@close="myDialogClose">
</my-dialog>
data () {
return {
myDialogVisible: false
}
},
methods: {
myDialogClose () {
this.myDialogVisible = false
// other code
}
}
source to share