javascript - 单击按钮移动到 vuetify 的下一个选项卡

Question

如果我单击位于第一个选项卡内容中的按钮，那么我想移至下一个选项卡。我该怎么做？？

标签:

<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')
}

Answer 1

使用v-model和value并在您的changeTab方法中只需更改绑定(bind)变量的值。工作代码片段如下:

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/vuetify@2.1.9/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/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.1.9/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>