Vuetify dialog with multiple activators

user_4454157 0
Viewed 1937

I have a dialog made in vuetify and want it to have multiple possible buttons, which activate it. The buttons are different from each other and in several different components. So I cannot just import the dialog component to the locations, because then the buttons are all same, as they are defined in the dialog:

<v-dialog>
  <template v-slot:activator="{ on, attrs }">
    <v-btn
      v-bind="attrs"
      v-on="on"
    >
      Activate
    </v-btn>
  </template>

  <v-card>
    My Content
  </v-card>
</v-dialog>

Is there a way, without just duplicating the component file to reach my goal?

vuetify.js vue.js dialog
1 Answers

You can create a global modal component to place in App.vue, and trigger it with v-model instead of activators. The v-model uses a global state (like from Vuex, etc.) which you can toggle from anywhere:

Modal

<template>
  <v-dialog v-model="$store.state.isModal">
    <v-card>
      My Content
    </v-card>
  </v-dialog>
</template>

Then you can toggle that state in some other component:

<v-btn @click="$store.dispatch('showModal')">SHOW</v-btn>

Here's a demo using Vue.prototype and Vue.observable instead of Vuex for the global state

user_21850930
Related