Sometimes, we want to open a Vuetify dialog from a component template in Vue.js.

In this article, we’ll look at how to open a Vuetify dialog from a component template in Vue.js.

How to open a Vuetify dialog from a component template in Vue.js?

To open a Vuetify dialog from a component template in Vue.js, we can use v-model.

For instance, we write

<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>

to add the v-dialog into the ScheduleForm.vue file.

We emit the show value to the parent when we open or close the dialog.

And we get the show value from the parent via the value prop.

If show is true then the dialog is shown.

Then we write

<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>

to import and register it in the parent component.

Then we set v-model to showScheduleForm to show the dialog if it’s set to true.

Conclusion

To open a Vuetify dialog from a component template in Vue.js, we can use v-model.