Vue Tabs - Control the Behavior

An end user can select Tabs items in two different modes: 'single' (by default) or 'multiple'. You can use the selectionMode property to change the mode.

App.vue


<template>
    <DxTabs
        :items="tabs"
        selection-mode="multiple" /> 
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
 
import DxTabs from "devextreme-vue/tabs";
 
export default {
    components: {
        DxTabs
    },
    data() {
        return {
            tabs: [
                { text: "User" },
                { text: "Comment" },
                // ...
            ]
        };
    }
};
</script>

If you need a tab to be preselected or to select it programmatically, pass its index in the data source array to the selectedIndex property.

App.vue


<template>
    <DxTabs
        :items="tabs"
        v-model:selected-index="selectedIndex" /> 
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
 
import DxTabs from "devextreme-vue/tabs";
 
export default {
    components: {
        DxTabs
    },
    data() {
        return {
            selectedIndex: 1,
            tabs: [
                { text: "User" },
                { text: "Comment" },
                // ...
            ]
        };
    }
};
</script>

As an alternative, you can use the selectedItem (for "single" selectionMode) or selectedItems (for "multiple" selectionMode) properties.

App.vue


<template>
    <DxTabs
        :items="tabs"
        selection-mode="multiple"
        v-model:selected-items="selectedItems" /> 
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
 
import DxTabs from "devextreme-vue/tabs";
 
const tabs = [
    { text: "User" },
    { text: "Comment" },
    // ...
];
 
export default {
    components: {
        DxTabs
    },
    data() {
        return {
            tabs: tabs,
            selectedItems: [tabs[0], tabs[1]]
        };
    }
};
</script>

When the total length of all tabs exceeds the Tabs container, the UI component shows navigation buttons that help an end user scroll the tab strip. This behavior is default only for desktops. To enable it on all types of devices, assign true to the showNavButtons property. Otherwise, assign false.

App.vue


<template>
    <DxTabs
        :items="tabs"
        :show-nav-buttons="true" /> 
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
 
import DxTabs from "devextreme-vue/tabs";
 
export default {
    components: {
        DxTabs
    },
    data() {
        return {
            tabs: [
                { text: "User" },
                { text: "Comment" },
                // ...
            ]
        };
    }
};
</script>

Vue Tabs - Control the Behavior

See Also