时间戳

首页 > 解决方案 > Vue - 如何制作基于外部控制动态激活

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

问题描述

如何根据按下的按钮动态激活选项卡。我正在使用<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>

标签： javascriptvue.jsvuejs2bootstrap-vuev-model

解决方案

尝试使用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>

推荐阅读