Open a Vuetify dialog from a component template in VueJS

Question

I'm using the VueJS Vuetify framework and I need to open a dialog - that gets imported as a component template - from another template. Once the Menu button in App.vue got clicked, the Modal should open. Here is my setup:

App.vue = navigation template with Menu button
Modal.vue = Modal template, imported as global in main.js

main.js

import Modal from './components/Modal.vue'
Vue.component('modal', Modal)

Modal.vue Template:

<template>
  <v-layout row justify-center>
    <v-btn color="primary" dark @click.native.stop="dialog = true">Open Dialog</v-btn>
    <v-dialog v-model="dialog" max-width="290">
      <v-card>
        <v-card-title class="headline">Use Google's location service?</v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Disagree</v-btn>
          <v-btn color="green darken-1" flat="flat" @click.native="dialog = false">Agree</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>
<script>
  export default {
    data () {
      return {
        dialog: false
      }
    }
  }
</script>

How to open the dialog?

tony19 · Accepted Answer · 2022-07-15 19:38:03Z

193

No event bus needed and v-model

Update:

When I first answered this, I posted my answer as a "workaround", since it didn't felt completely "right" at the time and I was new to Vue.js. I wanted to open or close the dialog by using a v-model directive, but I couldn't get there. After some time I found how to do this in the docs, using the input event and the value property, and here's how I think it should be done without an event bus.

Parent component:

<template>
   <v-btn color="accent" large @click.stop="showScheduleForm=true">    
   <ScheduleForm v-model="showScheduleForm" />
</template>

<script>
import ScheduleForm from '~/components/ScheduleForm'

export default {
  data () {
    return {
      showScheduleForm: false
    }
  },
  components: {
    ScheduleForm
  }
}
</script>

Child component (ScheduleForm):

<template>
<v-dialog v-model="show" max-width="500px">
  <v-card>
    <v-card-actions>
      <v-btn color="primary" flat @click.stop="show=false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
</template>

<script>
export default {
  props: {
     value: Boolean
  },
  computed: {
    show: {
      get () {
        return this.value
      },
      set (value) {
         this.$emit('input', value)
      }
    }
  }
}
</script>

Original answer:

I was able to work around this without the need for a global event bus.

I used a computed property with a getter AND a setter. Since Vue warns you about mutating the parent property directly, in the setter I simply emitted an event to the parent.

Here's the code:

Parent component:

<template>
   <v-btn color="accent" large @click.stop="showScheduleForm=true"></v-btn>   
   <ScheduleForm :visible="showScheduleForm" @close="showScheduleForm=false" />
</template>

<script>
import ScheduleForm from '~/components/ScheduleForm'

export default {
  data () {
    return {
      showScheduleForm: false
    }
  },
  components: {
    ScheduleForm
  }
}
</script>

Child component (ScheduleForm):

<template>
<v-dialog v-model="show" max-width="500px">
  <v-card>
    <v-card-actions>
      <v-btn color="primary" flat @click.stop="show=false">Close</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>
</template>

<script>
export default {
  props: ['visible'],
  computed: {
    show: {
      get () {
        return this.visible
      },
      set (value) {
        if (!value) {
          this.$emit('close')
        }
      }
    }
  }
}
</script>

edited Jul 15, 2022 at 19:38

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 5, 2018 at 20:35

Matheus Dal'Pizzol

6,1253 gold badges24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Canet Robern Over a year ago

This is an ABSOLUTELY perfect answer I think. Thank you. This works perfect!

Iulian Pinzaru Over a year ago

Tried that, it works as necessary. Better get this to the top!

Mark Sonn Over a year ago

If the above doesn't work, change your child's computed property to use $attrs like this: show: { get () { return this.$attrs.value }, set (value) { this.$emit('input', value) } }

user616 Over a year ago

This is the best solution IMO. No event bus needed!

KorbenDose Over a year ago

For me it only worked after changing the event emitting in the child to this.$emit('update:modelValue', value). See this answer for details.

|

Traxo · Accepted Answer · 2023-12-14 16:30:41Z

24

Simple minimal working example

Pass value prop as value to v-dialog component, and from child dialog emit input event whenever you want to close it:

// CustomDialog.vue
<v-dialog :value="value" @input="$emit('input', $event)">
  <v-btn color="red" @click.native="$emit('input', false)">Close</v-btn>
</v-dialog>
//
{
    props:['value']
}

and add v-model to your parent

// Parent.vue
<custom-dialog v-model="dialog">

So no custom event bus, no data, no watch, no computed.

Snippet:

Vue.use(Vuetify);
Vue.component("custom-dialog", {
  template: `
    <v-dialog :value="value" @input="$emit('input')">
      <v-card>         
        <v-btn color="red" @click.native="$emit('input')">Close</v-btn>
      </v-card>
    </v-dialog>`,
  props: ["value"]
});

var vm = new Vue({
  el: "#app",
  data() {
    return {
      dialog: false
    };
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
  <v-app>
    <v-btn @click="dialog = true">Open</v-btn>
    <custom-dialog v-model="dialog" />
  </v-app>
</div>

edited Dec 14, 2023 at 16:30

answered May 6, 2019 at 11:13

Traxo

19.1k5 gold badges78 silver badges92 bronze badges

7 Comments

Leonardo Bernardini Over a year ago

this seems a very easy solution but I'm having an hard time understanding why we should listen to the input event and re-trigger the input event on the declaration. I cannot find any documentation where and when this input event is triggered...thanks

Traxo Over a year ago

@LeonardoBernardini because "input" event gets emitted when v-dialog "value" changes. For example, if we don't use "persistent" prop, then clicking outside of the v-dialog will also trigger that event. So we use it to also cover that case. And also v-model should not be used on a prop, in this case value.

Traxo Over a year ago

@LeonardoBernardini Notice I explained it also in another question in the past, so check out that whole thread maybe: stackoverflow.com/questions/49310417/… (I'm not sure if Vue changed some practices since then tho)

Leonardo Bernardini Over a year ago

thanks, this seems to be not documented and it's confusing... now it's clear!

Winchester Over a year ago

It works only if you don't check for props type. Try adding props:{value: { type: Boolean, required: true }}. It'll show Invalid prop: type check failed for prop 'value'. Expected Boolean, got Undefined when you press ESC key to close dialog. codepen.io/duongthienlee/pen/abNjrbv?editors=1011

|

Roland · Accepted Answer · 2018-04-18 12:56:31Z

23

There are many ways to do it such is Vuex,Event Bus,Props with which you can manage whether the modal have to open or to close.I will show you my favourite way using the .sync modifier:

First i will simplify you question(the code part)

Parent component

<template>
   <div>
     <button @click="dialog=true">Open Dialog</button>
     <Child :dialog.sync="dialog" />
   </div>
</template>

<script>
import Child from './Child.vue'
export default {
    components: {
      Child
    },
    data: {
      return {
        dialog: false
      }
   }
}
</script>

Child(Dialog) Component

<template>
  <v-layout row justify-center>
    <v-dialog v-model="dialog" persistent max-width="290">
      <v-card>
        <v-card-title class="headline">Use Google's location service?</v-card-title>
        <v-card-text>Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn color="green darken-1" flat @click.native="close">Close</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>

  export default {
    props: {
        dialog: {
        default: false
      }
    },
    methods: {
        close() {
        this.$emit('update:dialog', false)
      }
    }
  }

</script>

answered Apr 18, 2018 at 12:56

Roland

28.1k9 gold badges108 silver badges103 bronze badges

4 Comments

Roland Over a year ago

Are you sure? vuejs.org/v2/guide/components-custom-events.html#sync-Modifier

Sebastian Over a year ago

I found a documentation page stating that, but just found medium.com/front-end-weekly/… which states that .sync has been re-added in 2.3 - but it didn't work for me.

Petercopter Over a year ago

This solution works for me, thanks! For some reason I'm having trouble grasping how to work with the sync modifier.

Robert Over a year ago

If you don't want to use 'persistent' on the dialog, you can also call the close method on the click outside event of the dialog '@click:outside="close"'

tony19 · Accepted Answer · 2022-07-15 20:08:57Z

14

You can open the dialog using custom events and using an event bus for non parent-child communication.

If your application gets a bit more complex I recommend you use Vuex for state management.

Event bus solution:

In your main.js or in a new file create and export a new Vue instance :

export const bus = new Vue()

In app.vue import the busand emit the event:

<template>
  <div>
    <button @click.prevent="openMyDialog()">my button</button>
  </div>
</template>

<script>
  import {bus} from '../main' // import the bus from main.js or new file
  export default {
    methods: {
      openMyDialog () {
        bus.$emit('dialog', true) // emit the event to the bus
      }
    }
  }
</script>

In modal.vue also import the bus and listen for the event in the created hook:

<script>
  import {bus} from '../main'    
  export default {
    created () {
      var vm = this
      bus.$on('dialog', function (value) {
        vm.dialog = value
      })
    }
  }
</script>

edited Jul 15, 2022 at 20:08

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 30, 2017 at 19:41

Soleno

1,9491 gold badge12 silver badges8 bronze badges

6 Comments

Tom Over a year ago

I tried it and got this _'bus' is not defined _ error after running npm run dev:

error  in ./src/components/Modal.vue     ✘  http://eslint.org/docs/rules/no-undef  'bus' is not defined     src/components/Modal.vue:23:5       bus.$on('dialog', function (value) {        ^   ✘ 1 problem (1 error, 0 warnings)   Errors:   1  http://eslint.org/docs/rules/no-undef   @ ./src/main.js 37:0-43  @ multi ./build/dev-client babel-polyfill ./src/main.js

What did I miss?

Soleno Over a year ago

Oh, sorry! I corrected my answer! Of course we have to export and import the bus in the "moduled" version. For not messing it up again I have also tested the code :) Sorry again for that quick shot.

Tom Over a year ago

Thanks for your help! :) There was an error because the data part was missing. Is this the correct/best-practice fix?

import {bus} from '../main'   export default {     data () {       return {         dialog: false       }     },     created () {       var vm = this       bus.$on('dialog', function (value) {         vm.dialog = value       })     }   }

Thanks again

Soleno Over a year ago

You're welcome :) Glad to help! You find the event bus solution in the official docs: vuejs.org/v2/guide/…. Here it's just adapted for the module system. So I would say it's a best practice. But it's only suited for small projects. I could imagine since you're using vuetify that your app could get a bit bigger. And for bigger apps it's recommended to use Vuex: vuex.vuejs.org/en . It's pretty easy and straight forward. That's what I usually use.

Soleno Over a year ago

Same principle. You would emit an event in your card.vue and listen to it in the app.vue.

|

Marco · Accepted Answer · 2018-06-05 13:25:23Z

4

The most simpler way I found to do it is:

in data() of component, return a attribute, let's say, dialog.

When you include a component, you can set a reference to your component tag. E.g.:

import Edit from '../payment/edit.vue';

<edit ref="edit_reference"></edit>

Then, inside my component, I have set a method:

        open: function () {
            var vm = this;

            vm.dialog = true;
        }

Finally, I can call it from parent, using:

  editar(item)
  {
      var vm = this;

      vm.$refs.edit_reference.open();
  }

edited Jun 5, 2018 at 13:25

answered May 28, 2018 at 18:53

Marco

2,9491 gold badge21 silver badges29 bronze badges

3 Comments

Tom Over a year ago

Thank you. Why do you write "var vm = this" instead of the shorter "this.$refs.edit_reference.open()"?

Marco Over a year ago

Because of the scope problem, although I not really sure it would be a problem, just to be safe as I was learning the concept of components.

Ron Al Over a year ago

this is brilliant!

Mochamad Arifin · Accepted Answer · 2020-01-05 14:36:52Z

I prefer use this:

DialogConfirm.vue

<template>
  <v-dialog :value="visible" max-width="450">
    <v-card>
      <v-card-title v-text="title" />
      <v-card-text v-text="message" />
      <v-card-actions v-if="visible">
        <template v-for="action in value">
          <v-spacer :key="action.label" v-if="typeof action == 'string'" />
          <v-btn
            v-else
            text
            :key="action.label"
            v-text="action.label"
            @click="doAction(action.action)"
            :color="action.color"
          />
        </template>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';

@Component
export default class DialogConfirm extends Vue {

  @Prop({ type: String, default: "Confirm" })
  title: string

  @Prop({ type: String, default: "Are you sure?" })
  message: string

  @Prop({ type: Array, default: undefined })
  value: { label: string, action: () => boolean, color: string }[]

  get visible() {
    return Array.isArray(this.value) && this.value.length > 0
  }

  doAction(action: () => boolean) {
    if ('undefined' == typeof action || action() !== false) {
      this.$emit('input', null)
    }
  }
}
</script>

Usage Example

/** Disable AP Mode */
  setApMode(enable: boolean) {
    const action = () => {
      Api.get('wifi', {
        params: {
          ap: enable
        }
      }).then(response => this.$store.dispatch('status'))
    }
    if (enable == true) {
      // No confirmation
      return action();
    }
    this.dialogTitle = 'Are you sure?'
    this.dialogMessage = "you may lost connection to this device.";
    this.dialogActions = [
      {
        label: 'Cancel',
        color: 'success'
      },
      'spacer',
      {
        label: "OK, Disable it",
        color: "error",
        action
      }
    ]
  }

Piatos · Accepted Answer · 2020-11-07 03:34:33Z

-1

methods: {
  openDialog(e) {
    this.dialog = true;
  }
},

This one works for me

answered Nov 7, 2020 at 3:34

Piatos

11 bronze badge

Collectives™ on Stack Overflow

Open a Vuetify dialog from a component template in VueJS

7 Answers 7

No event bus needed and v-model

Update:

Original answer:

8 Comments

Simple minimal working example

7 Comments

4 Comments

6 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

No event bus needed and v-model

Update:

Original answer:

8 Comments

Simple minimal working example

7 Comments

4 Comments

6 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related