javascript - 单击按钮的onclick移至vuetify的下一个选项卡

如果单击第一个选项卡内容中的按钮，那么我想移至下一个选项卡。我怎样才能做到这一点？？

标签：

<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>

方法：

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

最佳答案

使用v-model和value并在您的changeTab方法中更改绑定变量的值。工作代码段如下：

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>