create card carousel using bootstrap 5.2 carousel and vue 3 - vue.js

Question

I have this css code in my vue 3 component template
<div class="row mt-5 pt-5 m-0" id="carouselRow">
<!-- <div class="col-sm-12 col-md-12 col-lg-12 p-md-0"> -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="true">
<!-- <div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
</div> -->
<div class="carousel-inner">
<div class="row m-0" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
<div class="col-md-4 col-lg-4">
<div class="card">
<img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
<div class="card-body">
<h5>{{ doctor.name }} {{ doctor.surname }}</h5>
<p>{{ doctor.category }}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- </div> -->
</div>
I want to create a simple card carousel but at the moment I'm unable to use the right markup and I will see only one card in a crappy way, but on the dom the loop has rendered all the cards I want display.
How I can make a v-for loop that works fine and will render 3 bootstrap 5.2 cards for each carousel item into the array that will be looped?

Answer 1

I think you placed the v-for on the wrong item.
Vue is rendering now rendering this several times:
<div class="row m-0" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
<div class="col-md-4 col-lg-4">
<div class="card">
<img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
<div class="card-body">
<h5>{{ doctor.name }} {{ doctor.surname }}</h5>
<p>{{ doctor.category }}</p>
</div>
</div>
</div>
</div>
</div>
But you only need this:
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" >
<div class="col-md-4 col-lg-4">
<div class="card">
<img :src="doctor.propicUrl" class="img-fluid" width="150" alt="">
<div class="card-body">
<h5>{{ doctor.name }} {{ doctor.surname }}</h5>
<p>{{ doctor.category }}</p>
</div>
</div>
</div>
</div>
Try it with this:
<div class="carousel-item" :class="i === 0 ? 'active':''" id="doctorCard" v-for="( doctor, i ) in featuredDoctors.slice(0, 10)" :key="i">