Vue - 외부 제어를 기반으로 동적으로 활성화하는 방법

Vue - 외부 제어를 기반으로 동적으로 활성화하는 방법

어떤 버튼을 눌렀는지에 따라 탭을 동적으로 활성화하려면 어떻게 해야 한다.나는 그것을 사용하고 있다.<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>

사용 시도v-model… 대신에 말한 바와 같이active다음과 같이 받침하다.

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

네가 사용할 수 있는 다른 방법이 있어.

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

나는 이 방법이 더 읽기 쉽다고 생각한다.

참조URL: https://stackoverflow.com/questions/54062615/vue-how-to-make-b-tab-active-dynamically-based-on-external-control