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

Question

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

我添加了一个星形按钮，所以当它被点击时，你会收到一个提醒。

我需要的是，当我点击星标时，我希望选项卡和选项卡 View 都发生变化。

有什么想法吗？

<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

你可以尝试这样的事情:

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 .