How to use bootstrap carousel in 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.