Javascript Vue-如何制作<；b-tab>；基于外部控制的动态主动控制

如何根据按下的按钮动态激活选项卡。我正在使用

引导vue

中的

。从我下面的示例代码中可以看出，

步骤

变量会根据按下的按钮进行更改，但无论如何，选项卡始终处于活动状态

    <template>
        <div>
            <b-tabs>
                <b-tab title="Step 1" :active="step === 1">
                   <br>step 1
                </b-tab>
                <b-tab title="Step 2" :active="step === 2">
                    <br>step 2
                </b-tab>
                <b-tab title="Step 3" :active="step === 3">
                    <br>step 3
                </b-tab>
            </b-tabs>

            <button v-on:click="step = 1">Step 1</button>
            <button v-on:click="step = 2">Step 2</button>
            <button v-on:click="step = 3">Step 3</button>

        </div>
    </template>

    <script>
        export default {
            data() {
                return {
                    step: 0,
                }
            },
            mounted() {
            },
            methods: {
            },
        }
    </script>

第一步

步骤2

步骤3
第一步
步骤2
步骤3
导出默认值{
数据（）{
返回{
步骤：0，
}
},
安装的（）{
},
方法：{
},
}

尝试使用前面提到的

v-model

，而不是

active

道具，如下所示：

        <b-tabs v-model="step">
            <b-tab title="Step 1" >
               <br>step 1
            </b-tab>
            <b-tab title="Step 2" >
                <br>step 2
            </b-tab>
            <b-tab title="Step 3" >
                <br>step 3
            </b-tab>
        </b-tabs>

---

还有另一种方法可以使用

<b-tabs>
    <b-tab :active="selected_tab_name === 'first_tab'"></b-tab>
    <b-tab :active="selected_tab_name === 'second_tab'"></b-tab>
</b-tabs>

并按如下方式设置

Selected_选项卡名称

：

激活第一个选项卡

---

我认为这种方法更具可读性。

比其他方法更有效，解决了主要问题。我实际上想做的是一次只激活一个选项卡，所有其他选项卡都应该被禁用。用户应无法单击“禁用”选项卡。有什么简单的方法可以做到这一点吗？请尝试类似于

的方法，我必须删除v-model=“step”才能使其正常工作，但它再次为我指明了正确的方向，谢谢！

<b-tabs>
    <b-tab :active="selected_tab_name === 'first_tab'"></b-tab>
    <b-tab :active="selected_tab_name === 'second_tab'"></b-tab>
</b-tabs>