I am currently utilizing Vue 3 in combination with Bootstrap 5.
My objective is to incorporate multiple Tabpanels within a v-for. Each of these Tabs should feature distinct content.
To achieve this, I attempted placing my Tabs and their respective Content inside a v-for. However, the desired outcome is not being achieved at the moment (I cannot view the Content) and I am unable to pinpoint the issue. Additionally, I am uncertain whether two v-fors are necessary or if it is feasible to encapsulate everything within one.
Any assistance provided would be greatly appreciated.
<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>
Just for clarification on how the input is generated, here is what I do in the mounted hook:
data() {
return {
array: [1,2],
input: [],
}
}
mounted() {
this.array.map((i) => {
this.input.push({
id: i,
name: "Input" + i,
})
})
}