CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Varinder Sohal
Varinder Sohal

Reputation: 1292

Onclick of the button move to the next tab of vuetify

If I click on the button which is placed in the content of the first tab then I want to move to the next tab. how can I do this??

Tab:

<v-tabs
  color="cyan"
  dark
  slider-color="yellow"
>
  <v-tab ripple>
    Item 1
  </v-tab>
  <v-tab ripple>
    Item 2
  </v-tab>
  <v-tab-item>
    <v-card flat>
      <v-btn @click="changeTab()">
    </v-card>
  </v-tab-item>
  <v-tab-item>
    <v-card flat>
      <v-card-text>Contents for Item 2 go here</v-card-text>
    </v-card>
  </v-tab-item>  
</v-tabs>

Method:

changeTab(){
   console.log('hello')
}

Upvotes: 3

Views: 6237

Answers (1)

Lana
Lana

Reputation: 1267

Use v-model and value and in your changeTab method just change the value of the bound variable. The working code snippet is below:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods:{
    changeTab(){
     this.tab='tab-2'
    }
  },
  data () {
    return {
      tab: 'tab-1'
    }
  }
})
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>


<div id="app">
 <v-tabs
  v-model='tab'
  color="cyan"
  dark
  slider-color="yellow"
>
  <v-tab ripple href='#tab-1'>
    Item 1
  </v-tab>
  <v-tab ripple href='#tab-2'>
    Item 2
  </v-tab>
  <v-tab-item value='tab-1'> 
    <v-card flat>
      <v-btn @click="changeTab()">Go to item2</v-btn>
    </v-card>
  </v-tab-item>
  <v-tab-item value='tab-2'>
    <v-card flat>
      <v-card-text>Contents for Item 2 go here</v-card-text>
    </v-card> 
  </v-tab-item>  
</v-tabs>
</div>

Upvotes: 5

Related Questions