CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
thatOneGuy
thatOneGuy

Reputation: 10612

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

I have this codePen : https://codepen.io/anon/pen/KBNddq?&editors=101

I have added a star button, so when it clicks, you get an alert.

What I need is, when I click the star, I want the tab to change as well as the tab view.

Any ideas ?

<div id="app">
  <v-app id="inspire">
    <div>
      <v-toolbar color="cyan" dark tabs>
        <v-toolbar-side-icon></v-toolbar-side-icon>

        <v-toolbar-title>Page title</v-toolbar-title>

        <v-spacer></v-spacer>

        <v-btn icon>
          <v-icon>search</v-icon>
        </v-btn>

        <v-btn icon>
          <v-icon>more_vert</v-icon>
        </v-btn>

        <v-tabs slot="extension" v-model="model" centered color="cyan" slider-color="yellow">
          <v-tab v-for="i in 3" :key="i" :href="`#tab-${i}`">
            Item {{ i }}
          </v-tab>
        </v-tabs>
      </v-toolbar>

      <v-tabs-items v-model="model">
        <v-tab-item v-for="i in 3" :id="`tab-${i}`" :key="i">
          <v-card flat>
            <v-card-text v-text="text"></v-card-text>
            <v-btn @click.stop="changeTab" icon>
              <v-icon large color="blue">grade</v-icon>
            </v-btn>
          </v-card>
        </v-tab-item>
      </v-tabs-items>
    </div>
  </v-app>
</div>

Upvotes: 3

Views: 7522

Answers (1)

akuiper
akuiper

Reputation: 214927

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.

Upvotes: 2

Related Questions