vue.jsdialogvuetify.js

Vuetify dialog with multiple activators


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?


Solution

  • 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