Vuetify 2.6.13：如何在TypeScript中设置当前激活标签页？

你之前用activeTab.click()的方式行不通，核心原因是Vuetify标签页组件内部维护着自身的响应式状态，手动触发DOM点击事件无法正确同步组件的内部状态，而且用jQuery操作Vue管理的DOM也不符合框架最佳实践。下面是更可靠的实现方式：

1. 修改模板，添加响应式绑定 #

给<v-tabs>组件加上v-model，绑定一个用于控制当前激活标签的变量，同时确保<v-tab>和对应<v-tab-item>的value属性完全匹配：

<template>
    <div>
        <v-tabs height="25" hide-slider="true" v-model="activeTab">
            <v-tab value="tab1">
                <b>TAB 1</b>
            </v-tab>
            <v-tab-item value="tab1"> content 1</v-tab-item>
            
            <v-tab value="tab2">
                <b>TAB 2</b>
            </v-tab>
            <v-tab-item value="tab2"> content 2</v-tab-item>
            
            <v-tab value="tab3">
                <b>TAB 3</b>
            </v-tab>
            <v-tab-item value="tab3"> content 3</v-tab-item>
        </v-tabs> 
    </div>
</template>
<script src="./tabs.ts" lang="ts"></script>

2. 在TypeScript中实现切换逻辑 #

在tabs.ts里声明响应式变量activeTab，直接修改这个变量的值就能完成标签页切换：

import Vue from 'vue';

export default Vue.extend({
    data() {
        return {
            activeTab: 'tab1' // 默认激活第一个标签页
        };
    },
    methods: {
        changeTab() {
            this.activeTab = 'tab3'; // 直接赋值即可切换到tab3
        }
    }
});

补充：特殊场景下的备选方案 #

如果你的标签是动态生成的，必须通过ref操作标签组件，可以调用组件DOM元素的click方法（但依然优先推荐v-model方式）：

changeTab() {
    const tab3 = this.$refs.tab3 as Vue;
    tab3.$el.click();
}

内容的提问来源于stack exchange，提问作者JaySym