IBM Carbon Vue标签页程序化切换内容不更新问题求助

针对Carbon Vue组件<cv-tabs>程序化切换标签页的问题，核心是利用组件的响应式属性实现同步更新，而非直接调用内部方法。以下是具体修正方案：

方案一：使用v-model双向绑定（推荐） #

1. 修改模板绑定：将静态的selected="1"替换为v-model="activeTab"，实现选中索引的双向绑定：

<cv-tabs v-model="activeTab" aria-label="Tab navigation" ref="tabs" id="nav-tab">
    <cv-tab label="GETTING STARTED">
        ...
        <cv-button @click="changeTab">Go to JRS Navigator</cv-button>
    </cv-tab>
    <cv-tab label="TAXONOMY BASICS">
        ...
    </cv-tab>
    <cv-tab label="MANAGER GUIDANCE">
        ...
    </cv-tab>
    <cv-tab label="JRS NAVIGATOR">
        ... where I want the button to take me ...
    </cv-tab>
</cv-tabs>

2. 添加响应式数据：在组件的data中定义绑定的变量，对应初始选中的标签索引：

data() {
    return {
        activeTab: 1 // 初始选中第二个标签（索引1）
    }
}

3. 更新切换方法：直接修改绑定的变量，组件会自动同步标签样式和内容区域：

methods: {
    changeTab(){
        this.activeTab = 3; // 切换到第四个标签（索引3）
    },
    ...
}

方案二：手动绑定prop+监听change事件 #

如果无法使用v-model，可通过手动绑定selectedprop并监听change事件实现：

1. 模板修改：

<cv-tabs :selected="activeTab" @change="activeTab = $event" aria-label="Tab navigation" ref="tabs" id="nav-tab">
    <!-- 标签内容不变 -->
</cv-tabs>

2. data和方法与方案一完全一致

问题根源解释 #

你之前直接调用this.$refs.tabs.selected(3)仅更新了组件内部的UI状态，但未同步到父组件的响应式绑定，导致内容区域未触发切换。Carbon Vue的<cv-tabs>依赖selectedprop的响应式更新来同步内容和标签状态，通过绑定变量并修改变量值，才能实现完整的标签页切换。

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