javascript - Vue - 如何制作基于外部控制动态激活

Question

如何根据按下的按钮动态激活选项卡。我正在使用<b-tabs>from bootstrap-vue。在我下面的示例代码中，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而不是activeprop 如下：

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

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