13

vuetify says: If you want to programmatically open or close the dialog, you can do so by using v-model with a boolean value.

However I am quite unclear on what this means. Saying "using v-model" is vague at best. The parent component knows on setup if it should open but I am unclear on how to dynamically change this in the child. Am i supposed to pass it using v-bind?

<login v-bind:showDialog></login>

If so how does the child component deal with this?

Vuetify Dialog info here: https://vuetifyjs.com/components/dialogs

1
  • It depends how you define the dialog component, Presentational / Container component? Using v-model (defaults from the doc) assume you use it as a container component with data specified instead of passing down props. Commented Jun 8, 2017 at 23:38

3 Answers 3

15

As I understand you have a child component which have a dialog within it. Not sure that this is 100% right, but this is how I implement it. Child component with dialog:

<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 parent component we use it:

<my-dilaog :dialogVisible="myDialogVisible"
           @close="myDialogClose">
</my-dialog>

data () {
  return {
    myDialogVisible: false
  }
},
methods: {
  myDialogClose () {
    this.myDialogVisible = false
    // other code
  }
}
Sign up to request clarification or add additional context in comments.

Comments

11

Дмитрий Алферьев answer's is correct but get "Avoid mutating a prop directly" warning, because when close dialog, v-dialog try change v-model to false, while we passed props to v-model and props value won't change. to prevent the warning we should use :value , @input

<template>
    <v-dialog :value="dialog" @input="$emit('update:dialog',false)" @keydown.esc="closeDialog()" >
    ...
    </v-dialog>
</template>
<script>
    export default {
        props: {
            dialog: Boolean
        },
        methods: {
            closeDialog(){
                this.$emit('closeDialog');
            }
        }

In parent

<template>
    <v-btn color="primary" @click="showDialog=true"></v-btn>
    <keep-alive>
        <my-dialog
            :dialog.sync="showEdit"
            @closeDialog="closeDialog"
        >
        </my-dialog>
    </keep-alive>
</template>
<script>
    data(){
        return {
            showEdit:false,
        },
    },
    methods: {
        closeDialog(){
            this.showEdit = false;
        },
    }

Comments

9

v-model is a directive. You would use v-model, not v-bind.

The page you link has several examples. If you click on the <> button on the first one, it shows HTML source of

<v-dialog v-model="dialog">

v-model makes a two-way binding on a prop that is named value inside the component. When you set the bound variable's value to true, the dialog will display; when false, it will hide. Also, if the dialog is dismissed, it will set the variable's value to false.

3 Comments

i'm using the provided code in a custom "login" component. the "value" property needs to be set by the parent and not using the built-in button. perhaps i'm unclear how to set the 'value' property of a child component from the parent.
In this case, you use v-model="somevariable" where somevariable is the member of the parent that you want to control the dialog.
"v-model has been deprecated" - Vue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.