Estoy trabajando con Vue 3 y Bootstrap 5 .
Quiero tener algunos Tabpanels dentro de un v-for . Todas estas Tabs deben tener un contenido diferente.
Así que traté de poner mis Tabs dentro de un v-for y mi Content también.
Pero no funcionará en este momento (no pude ver el Contenido) y no pude averiguar cuál es el problema... y no estoy seguro en este momento si también necesito dos v-fors o si es posible obtenerlo todo en uno.
Gracias por tu ayuda.
<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> Hago lo siguiente en mounted solo para tener claro cómo se crea la input .
data() { return { array: [1,2], input: [], } } mounted() { this.array.map((i) => { this.input.push({ id: i, name: "Input" + i, }) }) }Aquí está mi código para que funcione:
Nota: estoy usando
<script setup>porque lo conozco mejor :) - funciona igual con su enfoque de Opciones-API.
guion
<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>plantilla (la parte importante):
<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>principal.js
import 'bootstrap/dist/js/bootstrap.bundle.min.js'; import 'bootstrap/dist/css/bootstrap.min.css'; También tenga en cuenta que map tiene diferentes casos de uso que forEach ; en su caso, debe usar forEach .