Carousel bootstrap with vue js component - vue.js

Question

currently I'm creatting one component using Carousel With indicators GetBootstrap Carousel With indicators
I am implementing this code in one vue component, like:
<template>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<div v-for="(image, index) in images" :key="index">
<li data-target="#carouselExampleIndicators" :data-slide-to="index" :class=" index === 0? 'active' : '' "></li>
</div>
</ol>
<div class="carousel-inner">
<div v-for="(image, index) in images" :key="index">
<div :class=" index === 0? 'carousel-item active' : 'carousel-item' ">
<img class="d-block w-100" :src="image.path" :alt="image.name">
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</template>
<script>
export default {
props: ["app_route"],
data() {
return {
images: [],
};
},
mounted: function() {
this.getItemsSlider();
},
methods: {
getItemsSlider() {
axios
.get(this.app_route + "/admin/slider/list", {
})
.then((response) => {
//console.log("response: ", response.data);
this.images = response.data;
});
},
}
};
</script>
currently the first image is showing but the other images are not showing, the slider is not working too.
Why? what I'm doing wrong?
here is the code codesandbox

Answer 1

According to the documentation, there must be strictly nesting of elements .carousel-inner > .carousel-item.
You should try this:
<div class="carousel-inner">
<div v-for="(image, index) in images" :key="index" :class="index === 0 ? 'carousel-item active' : 'carousel-item'">
<img class="d-block w-100" :src="image" :alt="image.name" />
</div>
</div>