Bootstrap 4 tabs with VuesJS in a loop - can't go back to the first tab - vue.js

Question

I am using vueJS and Bootstrap tabs and can't get them to work properly. I can visit tab 1, tab 2, tab 3, tab 4, but then I can't go back to tab 1.
I can also go 1, 3, but then not 1 and 2. I can basically only go to the right
As these tabs are in a v-for loop, I add ids to each of them.
I have zero error/warning, each ID is unique.
<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" data-toggle="tab" :href="'#infosGenform'+form.id_item" 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" data-toggle="tab" :href="'#inscrform'+form.id_item" 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" data-toggle="tab" :href="'#machineform'+form.id_item" 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" data-toggle="tab" :href="'#comform'+form.id_item" role="tab" aria-controls="home" aria-selected="true">comform</a>
</li>
</ul>
</div>
</nav>
<div class="tab-content" :id="'myTabContent'+form.id_item">
<div class="tab-pane fade show active itra-light-grey-bgr" :id="'infosGenform'+form.id_item" role="tabpanel" aria-labelledby="infosGenform-tab">
1
</div>
<div class="tab-pane fade show itra-light-grey-bgr" :id="'inscrform'+form.id_item" role="tabpanel" aria-labelledby="inscrform-tab">
2
</div>
<div class="tab-pane fade show itra-light-grey-bgr" :id="'machineform'+form.id_item" role="tabpanel" aria-labelledby="machineform-tab">
3
</div>
<div class="tab-pane fade show itra-light-grey-bgr" :id="'comform'+form.id_item" role="tabpanel" aria-labelledby="comform-tab">
4
</div>
</div>
Is it something you already experienced?
Thanks a lot

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