[Vuejs]-Bootstrap 4 tabs with VuesJS in a loop – can't go back to the first tab

by

1👍

✅

I would avoid using jQuery and use vuejs instead to navigate tabs. Here is my approach.

In your tab navigation add this @click.prevent="showTab(1)". The .prevent is to prevent default action of going to another page. In your other navigation do the same i.e @click.prevent="showTab(n)".

This means you will have to add a new vuejs method showTab(value)like below.

showTab(value){
  this.tab = value
}

In your tab content use vuejs show v-show="tab == 1" Find the full code below.

<template>
    <div>
        <nav class="navbar navbar-expand-lg " style="width:100%;">
            <div class=" navbar-collapse">
                <ul class="navbar-nav mr-auto mt-2 mt-lg-0" :id="'myTab'+form.id_item" role="tablist" style="display: flex; width:100%">
                    <li class="nav-item nav-evt-li">
                        <a class="nav-link nav-evt-a active" :id="'infosGenform-tab'+form.id_item" @click.prevent="showTab(1)" role="tab" aria-controls="infosGenform"
                            aria-selected="true">infosGenform</a>
                    </li>
                    <li class="nav-item nav-evt-li">
                        <a class="nav-link nav-evt-a " :id="'inscrform-tab'+form.id_item" @click.prevent="showTab(2)" role="tab" aria-controls="inscrform"
                            aria-selected="true">inscrform</a>
                    </li>
                    <li class="nav-item nav-evt-li">
                        <a class="nav-link nav-evt-a" :id="'machineform-tab'+form.id_item" @click.prevent="showTab(3)" role="tab" aria-controls="machineform"
                            aria-selected="true">machineform</a>
                    </li>
                    <li class="nav-item nav-evt-li">
                        <a class="nav-link nav-evt-a " :id="'comform-tab'+form.id_item" @click.prevent="showTab(4)" role="tab" aria-controls="home"
                            aria-selected="true">comform</a>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="tab-content" :id="'myTabContent'+form.id_item">
            <div v-show="tab == 1" class="tab-pane fade show itra-light-grey-bgr" :id="'infosGenform'+form.id_item" role="tabpanel"
                aria-labelledby="infosGenform-tab">
                1
            </div>
            <div v-show="tab == 2" class="tab-pane fade show itra-light-grey-bgr" :id="'inscrform'+form.id_item" role="tabpanel"
                aria-labelledby="inscrform-tab">
                2
            </div>
            <div v-show="tab == 3" class="tab-pane fade show itra-light-grey-bgr" :id="'machineform'+form.id_item" role="tabpanel"
                aria-labelledby="machineform-tab">
                3
            </div>
            <div v-show="tab == 4" class="tab-pane fade show itra-light-grey-bgr" :id="'comform'+form.id_item" role="tabpanel"
                aria-labelledby="comform-tab">
                4
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            tab: 1
        }
    },
    methods: {
        showTab(value){
            this.tab = value
        }
    }
}
</script>

I hope this answer will help.

👤muya.dev

Leave a comment