Vuetify 更改选项卡事件

Question

我使用v-tabs，并且想知道：当我切换选项卡时，如何获取选项卡的ID？ 这是我的代码：

 <v-tabs class="tabs-container" color="green" grow>
        <v-tab class="tab"
               v-for="tab of tabs"
               :key="tab.id"
               :title=tab>
            {{tab.name}}
        </v-tab>
        <v-tabs-items>
        <v-tab-item v-for="tab in tabs" :key="tab.id">
            <div v-if='tab.id == 0'>
                <CreateHero v-on:updateAllTabs="updateAllTabs"/>
            </div>
            <div v-else>
                <HeroPresenter/>
            </div>
        </v-tab-item>
        </v-tabs-items>
    </v-tabs>

...
    methods: {
            updateAllTabs() {
                axios.get('/hero').then(responce => {
                    this.tabs = responce.data
                })
            },
            getHero(id) {
                this.$emit("getCurrentHero", id);
            }
        }

因此，当单击选项卡时，我希望在HeroPresenter组件中发送选项卡ID。我尝试使用$emit，但在v-tab中应该写什么？我的Vue组件HeroPresenter已经订阅了“getCurrentHero”事件。

- Hayami Pysh

Answer 1

你可以添加点击事件，这将调用你的函数。

<v-tab class="tab"
    v-for="tab of tabs"
    :key="tab.id"
    :title=tab
    @click="getHero(tab.id)"
>

- depperm

---

API文档中有一个更改事件。难道没有任何方法可以使用它吗？ - ahmadkarimi12

@AK12，确实有这个问题，但那不是原帖的问题。 - depperm

@therealak12 <v-tabs @change="changeTab"> 并且添加一个方法 changeTab(tab)。如果有索引或键，则选项卡将自动传递。 - Ben