How to use bootstrap carousel in Vue.js - vue.js

Question

I am quite new in vue and I am trying to make a bootstrap carousel using bootstrap.
<template>
<!-- Start Banner Hero -->
<div
id="webshop-hero-carousel"
class="carousel slide"
data-bs-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-bs-target="#webshop-hero-carousel"
data-bs-slide-to="0"
class="active"
></li>
<li
data-bs-target="#webshop-hero-carousel"
data-bs-slide-to="1"
></li>
<li
data-bs-target="#webshop-hero-carousel"
data-bs-slide-to="2"
></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item" v-for="picture in pictures" :key="'picture-' + picture.id">
<div class="container">
<div class="row p-5">
<div class="col-lg-6 mb-0 d-flex align-items-center">
<div class="text-align-left align-self-center">
<!-- <h1 class="h1 text-success"><b>Jassa</b> eCommerce</h1> -->
<h3 class="h2">{{picture.text}}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<a
class="carousel-control-prev text-decoration-none w-auto ps-3"
href="#webshop-hero-carousel"
role="button"
data-bs-slide="prev"
>
<i class="fas fa-chevron-left"></i>
</a>
<a
class="carousel-control-next text-decoration-none w-auto pe-3"
href="#webshop-hero-carousel"
role="button"
data-bs-slide="next"
>
<i class="fas fa-chevron-right"></i>
</a>
</div>
<!-- End Banner Hero -->
</template>
<script>
export default {
data() {
return {
pictures: [
{
id: 1,
text: "Freibad",
},
{
id: 2,
text: "Hallenbad",
},
],
};
},
};
</script>
So here is my component but it doesnt work properly. I basically just want to show {{picture.text}} on each carousel but it doesnt display anything properly.

Answer 1

None of the carousel-item elements are active.
You can control the "active" item programmatically using Vue. Here is one example:
new Vue({
el:"#app",
data: () => ({
pictures: [ { id: 1, text: "Freibad" }, { id: 2, text: "Hallenbad" } ],
active: 0
}),
methods: {
setActive(index) {
let active = index;
if(index === this.pictures.length) active = 0;
else if(index === -1) active = this.pictures.length - 1;
this.active = active;
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="webshop-hero-carousel" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#webshop-hero-carousel" data-bs-slide-to="0"></li>
<li data-bs-target="#webshop-hero-carousel" data-bs-slide-to="1"></li>
<li data-bs-target="#webshop-hero-carousel" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div
v-for="(picture, index) in pictures"
:key="'picture-' + picture.id"
:class="{ 'carousel-item': true, 'active': index === active }"
>
<div class="container">
<div class="row p-5">
<div class="col-lg-6 mb-0 d-flex align-items-center">
<div class="text-align-left align-self-center">
<h3 class="h2">{{picture.text}}</h3>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev text-decoration-none w-auto ps-3" href="#webshop-hero-carousel" role="button" data-bs-slide="prev" #click="setActive(active-1)">
<i class="fas fa-chevron-left"></i>
</a>
<a class="carousel-control-next text-decoration-none w-auto pe-3" href="#webshop-hero-carousel" role="button" data-bs-slide="next" #click="setActive(active+1)">
<i class="fas fa-chevron-right"></i>
</a>
</div>
</div>
I would also suggest taking a look at bootstrap-vue.