How do I make a tab active dynamically based on which button is pressed. I'm using the <b-tabs> from bootstrap-vue. From my example code below the step variable is changed according to the button pressed, but the tabs are always active regardless.

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

How do I make a tab active dynamically based on which button is pressed. I'm using the <b-tabs> from bootstrap-vue. From my example code below the step variable is changed according to the button pressed, but the tabs are always active regardless.

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

• javascript
• vue.js
• vuejs2
• bootstrap-vue
• v-model

2 Answers 2

Try to use v-model as mentioned in this example instead of active prop as follows :

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

and your step should begin from 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>

There is another way that you can use.

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

and set the selcted_tab_name like this:

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

I think this way is more readable.