如何在 Vue.js 中使用 bootstrap carousel

Question

我對 vue 很陌生，我正在嘗試使用引導程序制作引導程序輪播。

<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>

所以這是我的組件，但它不能正常工作。 我基本上只想在每個輪播上顯示 {{picture.text}} 但它沒有正確顯示任何內容。

Answer 1

沒有一個carousel-item元素是active 。

您可以使用Vue編程方式控制“活動”項目。 這是一個例子：

 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>

我還建議看看bootstrap-vue 。