[Question]: How to programmatically change tabs using IBM Carbon Design System with Vue?

[ponessa]

Question for Carbon

I am an IBMer and have reached out in #carbon-components, who directed #carbon-vue, but have had no luck. At this point, I am not sure if I am missing something (the most probable option) or if there is a bug.

I need help programmatically changing Carbon/vue tabs. In the 1st tab (0), I want to be able click a button and bring the user to the 4th tab (3). In the template section I have the following:

<cv-tabs selected="1" 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>

In the methods section I define changeTab(). This pulls the cv-tabs VueComponent based on the ref="tabs", setting selected(3) does NOT switch the tabs, it only changes the selected tab to be the 4th tab (3) JRS NAVIGATOR (I.e., 4th tab has the blue bar under it), but the tab’s content is still the first tab (GETTING STARTED).

methods: {
    changeTab(){
        //this.$refs.tabs.navigateToTab(3)
        this.$refs.tabs.selected(3)
    },
    ...
}

Any ideas?

Code of Conduct

• [X] I agree to follow this project's Code of Conduct