I'm working with Vue 3 and Bootstrap 5.
I want to have some Tabpanels inside of a v-for. All of these Tabs should have a different content.
So I've tried to put my Tabs inside of a v-for and my Content too.
But it wont work out right now (I could not see the Content) and I could not figure it out whats the problem.. and I'm not sure right now if I also need two v-fors or if it's possible to get it all in one.
Thanks for your help.
<ul class="mt-3 nav nav-pills" id="all_tabs" role="tablist">
<div v-for="item in input" :key="item.id">
<li class="ms-1 nav-item" role="presentation">
<button
class="nav-link active"
:id="item.id"
data-bs-toggle="tab"
:data-bs-target="'#tab' + item.id"
type="button"
role="tab"
:aria-controls="'tab' + item.id"
>
{{ item.name }}
</button>
</li>
</div>
</ul>
<div class="tab-content mt-3" id="all_tabs">
<div v-for="item in input" :key="item.id">
<div class="tab-pane fade" :id="'tab' + item.id" role="tabpanel">
<span>{{item.name}}</span>
</div>
</div>
</div>
I do following in mounted just to be clear how input is created.
data() {
return {
array: [1,2],
input: [],
}
}
mounted() {
this.array.map((i) => {
this.input.push({
id: i,
name: "Input" + i,
})
})
}
Here is my code to make it work:
Note: I am using
<script setup>because I know it better :) - it works the same with your Options-API approach.
script
<script setup>
import { ref } from 'vue';
const input = ref([]);
const array = ref([1,2]);
array.value.forEach((i) => {
input.value.push({
id: i,
name: "Input" + i,
});
});
</script>
template (the important part):
<ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
<li v-for="(item, index) of input" class="nav-item" role="presentation">
<button class="nav-link"
:class="index === 0 ? 'active': null"
:id="`${item.name}-tab`"
data-bs-toggle="pill"
:data-bs-target="`#${item.name}`"
type="button"
role="tab"
:aria-controls="item.name"
:aria-selected="index === 0"
>
{{ item.name }}
</button>
</li>
</ul>
<div class="tab-content" id="pills-tabContent">
<div v-for="(item, index) of input"
class="tab-pane fade"
:class="index === 0 ? 'show active': null"
:id="item.name" role="tabpanel"
aria-labelledby="pills-home-tab"
>
{{ item.name }}
</div>
</div>
main.js
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import 'bootstrap/dist/css/bootstrap.min.css';
Also note that map has a different usecases than forEach - in your case you should use forEach.