How to trigger vuetify dialog with vuetify's tab instead of a button

I'm trying to trigger a vuetify dialog with vuetify's tabs. I am not sure how to achieve that. I have two components, Tabs.vue and Dialog.vue.

From vuetify, the Tabs.vue component is:

<template>    <v-card>      <v-tabs        v-model="tab"        background-color="deep-purple accent-4"        centered        dark        icons-and-text      >        <v-tabs-slider></v-tabs-slider>          <v-tab href="#tab-1">          Recents          <v-icon>mdi-phone</v-icon>        </v-tab>          <v-tab href="#tab-2">          Favorites          <v-icon>mdi-heart</v-icon>        </v-tab>          <v-tab href="#tab-3">          Nearby          <v-icon>mdi-account-box</v-icon>        </v-tab>      </v-tabs>        <v-tabs-items v-model="tab">        <v-tab-item          v-for="i in 3"          :key="i"          :value="'tab-' + i"        >          <v-card flat>            <v-card-text></v-card-text>          </v-card>        </v-tab-item>      </v-tabs-items>    </v-card>  </template>  

The Dialog component is:

<template>    <v-row justify="center">      <v-dialog        v-model="dialog"        persistent        max-width="600px"      >        <template v-slot:activator="{ on, attrs }">          <v-btn            color="primary"            dark            v-bind="attrs"            v-on="on"          >            Open Dialog          </v-btn>        </template>        <v-card>          <v-card-title>            <span class="headline">User Profile</span>          </v-card-title>          <v-card-text>            <v-container>              <v-row>                <v-col                  cols="12"                  sm="6"                  md="4"                >                  <v-text-field                    label="Legal first name*"                    required                  ></v-text-field>                </v-col>                <v-col                  cols="12"                  sm="6"                  md="4"                >                  <v-text-field                    label="Legal middle name"                    hint="example of helper text only on focus"                  ></v-text-field>                </v-col>                <v-col                  cols="12"                  sm="6"                  md="4"                >                  <v-text-field                    label="Legal last name*"                    hint="example of persistent helper text"                    persistent-hint                    required                  ></v-text-field>                </v-col>                <v-col cols="12">                  <v-text-field                    label="Email*"                    required                  ></v-text-field>                </v-col>                <v-col cols="12">                  <v-text-field                    label="Password*"                    type="password"                    required                  ></v-text-field>                </v-col>                <v-col                  cols="12"                  sm="6"                >                  <v-select                    :items="['0-17', '18-29', '30-54', '54+']"                    label="Age*"                    required                  ></v-select>                </v-col>                <v-col                  cols="12"                  sm="6"                >                  <v-autocomplete                    :items="['Skiing', 'Ice hockey', 'Soccer', 'Basketball', 'Hockey', 'Reading', 'Writing', 'Coding', 'Basejump']"                    label="Interests"                    multiple                  ></v-autocomplete>                </v-col>              </v-row>            </v-container>            <small>*indicates required field</small>          </v-card-text>          <v-card-actions>            <v-spacer></v-spacer>            <v-btn              color="blue darken-1"              text              @click="dialog = false"            >              Close            </v-btn>            <v-btn              color="blue darken-1"              text              @click="dialog = false"            >              Save            </v-btn>          </v-card-actions>        </v-card>      </v-dialog>    </v-row>  </template>  

Note that I copied each component from vuetify directly. As you can see to trigger the dialog, vuetify gives the example of using a button which is within the Dialog.vue component, I will paste that part of the code below again:

<template v-slot:activator="{ on, attrs }">      <v-btn        color="primary"        dark        v-bind="attrs"        v-on="on"      >        Open Dialog      </v-btn>   </template>  

It's using the v-slot:activator to trigger the dialog. However I'm not sure how I can use one of the tabs in Tabs.vue to trigger the dialog from Dialogs.vue instead. Thank you

https://stackoverflow.com/questions/67041365/how-to-trigger-vuetify-dialog-with-vuetifys-tab-instead-of-a-button April 11, 2021 at 12:06PM