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

Question

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>

Answer 1

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.