Vue - 如何根据外部控制动态激活<b-tab>

Question

如何根据按下的按钮动态激活选项卡。我正在使用 bootstrap-vue 中的 <b-tabs>。从我下面的示例代码中，step 变量会根据按下的按钮进行更改，但无论如何选项卡始终处于活动状态。

    <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>

Answer 1

尝试使用提到的 v-model in this example 而不是 active prop 如下：

        <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>

你的步骤应该从 0

开始

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

Answer 2

您可以使用另一种方法。

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

并像这样设置 selcted_tab_name：

<b-button @click="selected_tab_name = 'first_tab'">Activate first tab</b-button>

我觉得这种方式可读性更好

Vue - 如何根据外部控制动态激活<b-tab>

Vue - How to make <b-tab> active dynamically based on external control

javascript

vue.js

vuejs2

v-model

bootstrap-vue