如何让Shopware 6的<sw-tabs>组件实现标签页切换显示对应内容？

你的代码未将标签与对应内容建立关联，导致点击标签无法切换显示内容。Shopware 6的<sw-tabs>组件需要配合<sw-tabs-item>（标签头）和<sw-tabs-pane>（内容面板），通过状态绑定实现切换效果。

修正后的完整代码示例 #

<template>
    <sw-tabs v-model="activeTab">
        <!-- 标签项：每个标签设置唯一name属性 -->
        <sw-tabs-item name="name">
            Content Name
        </sw-tabs-item>
        <sw-tabs-item name="age">
            Content Age
        </sw-tabs-item>

        <!-- 内容面板：name属性与对应标签保持一致 -->
        <sw-tabs-pane name="name">
            <p>List of names</p>
        </sw-tabs-pane>
        <sw-tabs-pane name="age">
            <p>List of Ages</p>
        </sw-tabs-pane>
    </sw-tabs>
</template>

<script>
export default {
    data() {
        return {
            activeTab: 'name' // 默认选中第一个标签
        };
    }
};
</script>

关键说明 #

• 关联标签与内容：给每个<sw-tabs-item>和对应的<sw-tabs-pane>设置相同的name属性，作为匹配标识。
• 控制激活状态：通过v-model绑定activeTab数据属性，该值会自动同步当前选中标签的name，进而显示对应内容面板。
• 默认选中项：在data中初始化activeTab为某个标签的name，页面加载时会自动展示对应内容。

替代写法（手动控制） #

若不想使用v-model，也可通过active属性和change事件手动控制切换：

<template>
    <sw-tabs :active="activeTab" @change="handleTabChange">
        <sw-tabs-item name="name">Content Name</sw-tabs-item>
        <sw-tabs-item name="age">Content Age</sw-tabs-item>

        <sw-tabs-pane name="name">
            <p>List of names</p>
        </sw-tabs-pane>
        <sw-tabs-pane name="age">
            <p>List of Ages</p>
        </sw-tabs-pane>
    </sw-tabs>
</template>

<script>
export default {
    data() {
        return {
            activeTab: 'name'
        };
    },
    methods: {
        handleTabChange(tabName) {
            this.activeTab = tabName;
        }
    }
};
</script>

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