Vuetify: How to Preselect Active Tab

Vuetify: How to preselect active tab?

As a workaround I made a wrapper component:

<template>
  <v-tabs v-model="selectedTab">
    <slot></slot>
  </v-tabs>
</template>

<script>
  export default {
    name: 'StaticTabs',

    props: [ 'selected' ],

    mounted() {
      this.selectedTab = this.selected
    },

    data: () => ({
      selectedTab: null
    }),
  }
</script>

Use it with this:

<static-tabs selected="/path2">
  <v-tab id="tab1" href="/path1">Tab 1</v-tab>
  <v-tab id="tab2" href="/path2">Tab 2</v-tab>
</static-tabs>

Lots of code for a very basic task, but it works.

How to set Vuetify tabs to active based on url

Looks like that setting the v-model attribute of v-tabs equal to window.location.href in the data object solves it.

How to toggle tabs in VueJS Vuetify by clicking on something other than the tab itself

You could try something like this:

new Vue({
  el: '#app',
  data () {
    return {
      i: 0,            // set i to track the tab index
      model: 'tab-2',
      text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
    }
  },
  methods: {
    changeTab(){
      //update the index and model
      this.i = (this.i + 1) % 3
      this.model = `tab-${this.i+1}`

      alert("Changing tab")
    }
  }
})

CodePen Example.

Vuetify Deselecting v-tabs

First tab is autoselected.

A workaround :
Add fake first tab with <v-tab class="pa-0 ma-0" style="min-width:0px" /> and a first empty tab item <v-tab-item />

Dynamically loading/changing Vuetify Tabs

Try this -

<v-tab v-for="(item, i) in items" :key="i">

and in your reset function -

reset() {
  this.tab = null; // add this new line
  this.items = ['one new tab'];
},

The instead of using item as key use i (index).

Link to pen - https://codepen.io/anon/pen/rbbNEW?editors=1010

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

i made a CodeSandbox for you. if this is what you wanted i will explain afterwards what i did. Check here

ok...

first let's check your structur.
You wrapped Dialog.vue in its own component, that means you need to toggle the Dialog On/Off mechanism from outside now, the parent(Tabs.vue).

Tabs.vue

<template>
  <v-card>
    <v-tabs
      background-color="deep-purple accent-4"
      centered
      dark
      icons-and-text
    >
      <v-tabs-slider></v-tabs-slider>
      <v-tab href="#tab-1" @change="toggleDialog('recents')">
        Recents
        <v-icon>mdi-phone</v-icon>
      </v-tab>

      <v-tab href="#tab-2" @change="toggleDialog('favorites')">
        Favorites
        <v-icon>mdi-heart</v-icon>
      </v-tab>

      <v-tab href="#tab-3" @change="toggleDialog('nearby')">
        Nearby
        <v-icon>mdi-account-box</v-icon>
      </v-tab>
    </v-tabs>

    <v-tabs-items>
      <v-tab-item v-for="i in 3" :key="i" :value="'tab-' + i">
        <v-card flat>
          <v-card-text>{{ text }}</v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
    <Dialog <--------------------------- ADDING component Dialog.vue
      :show-dialog="dialog" <----------- PROP the On/Off logic
      :tab-controll="tabControll" <----- PROP the "which tab is selected"
      @close-dialog="dialog = false" <-- TOGGLE Off on "close" button
      @save-dialog="dialog = false" <--- TOGGLE Off on "save" button
    />
  </v-card>
</template>

<script>
import Dialog from "@/components/Dialog";
export default {
  components: {
    Dialog,
  },
  data() {
    return {
      tab: 0,
      dialog: false, <--------- CONTROLLS the On/Off mechanism inside Dialog.vue
      tabControll: "None Tab",<- CONTROLLS which tab is selected in Dialog.vue
      text: "some text i guess",
    };
  },
  methods: {
    toggleDialog(tab) {
      this.tabControll = tab;
      this.dialog = true;
    },
  },
};
</script>

<style>
</style>

each v-tab got his very own changed event, that's why you need to listen to it on each v-tab.

<v-tabs
      background-color="deep-purple accent-4"
      centered
      dark
      icons-and-text
    >
      <v-tabs-slider></v-tabs-slider>
      <v-tab href="#tab-1" @change="toggleDialog('recents')"> <------- @change
        Recents
        <v-icon>mdi-phone</v-icon>
      </v-tab>

      <v-tab href="#tab-2" @change="toggleDialog('favorites')"> <------- @change
        Favorites
        <v-icon>mdi-heart</v-icon>
      </v-tab>

      <v-tab href="#tab-3" @change="toggleDialog('nearby')"> <------- @change
        Nearby
        <v-icon>mdi-account-box</v-icon>
      </v-tab>
    </v-tabs>

now lets look at the toggleDialog function

methods: {
    toggleDialog(tab) {
      this.tabControll = tab;
      this.dialog = true;
    },
  },

it does nothing else then toggle the dialog in your data to true and sets a tabControll to let your Dialog.vue know which tab was clicked.

Dialog.vue

now we prepare Dialog.vue to handle the outside controlled behaviors.

<template>
  <v-row justify="center">
    <v-dialog v-model="dialog" persistent max-width="600px"> <--------- HERE
      <v-card>
        <v-card-title>
          <span class="headline">User Profile - {{ tabControll }}</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="$emit('close-dialog')">
            Close
          </v-btn>
          <v-btn color="blue darken-1" text @click="$emit('save-dialog')">
            Save
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-row>
</template>
<script>
export default {
  data() {
    return {
      dialog: this.showDialog,
    };
  },
  watch: {
    showDialog: function () {
      this.dialog = this.showDialog;
    },
  },
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    tabControll: {
      type: String,
      default: "none",
    },
  },
};
</script>

<style>
</style>

we stay consistent and we don't use the showDialog prop in our v-model="dialog", otherwise we got a warning that we mutate props without the knowing of the parent (Tabs.vue)

<v-dialog v-model="dialog" persistent max-width="600px">

instead we do bind the incoming prop data into our dialog inside data

data() {
    return {
      dialog: this.showDialog,
    };
  },

now we do not mutate props from outside and we just copy the state of the dialog which is handled from Tabs.vue

if you now click on a Tab the event will toggle this showDialog into true and this will change the dialog inside your data also to true and show the Dialog.

so far so good... now we need functionality to turn the dialog off again.

as i said a multiple times, mutating props is a bad thing, we fire an $emit and we tell Tabs.vue to close the dialog again.

<v-btn color="blue darken-1" text @click="$emit('close-dialog')">
  Close
</v-btn>
<v-btn color="blue darken-1" text @click="$emit('save-dialog')">
  Save
</v-btn>

back to

Tabs.vue

we listen to those custom events and we toggle the dialog = false
right here

<Dialog
      :show-dialog="dialog"
      :tab-controll="tabControll"
      @close-dialog="dialog = false" <-- TOGGLE Off on "close" button
      @save-dialog="dialog = false" <--- TOGGLE Off on "save" button
    />

---

Related Topics