javascript - 如何通过单击选项卡本身以外的其他内容来切换 VueJS Vuetify 中的选项卡

Question

我有这个 codePen：https ://codepen.io/anon/pen/KBNddq?&editors=101

我添加了一个星形按钮，所以当它点击时，您会收到警报。

我需要的是，当我单击星号时，我希望选项卡和选项卡视图一样更改。

有任何想法吗 ？

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

标签： javascriptvue.jsvuetify.js

Answer 1

你可以尝试这样的事情：

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

代码笔示例。