Vue - Как сделать <b-tab> активным динамически на основе внешнего управления - PullRequest
Новая
       24

Vue - Как сделать <b-tab> активным динамически на основе внешнего управления

0 голосов
/ 06 января 2019

Как сделать вкладку динамически активной в зависимости от того, какая кнопка нажата. Я использую <b-tabs> от 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>

1 Ответ

0 голосов
/ 06 января 2019

Попробуйте использовать 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>
...