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