Vue.jsのv-for + Bootstrapでカルーセルを実装する方法

はじめに

BootstrapのCarouselで表示される画像を、Vue.jsのv-forを使って実装するにはどうしたらいいか？を解説します！

※BootstrapVueではなく、普通のBootstrapを使った場合です！！！

環境

・Vue.js v2系
・Bootstrap v4系

htmlを編集するだけでは実現できないっぽい

これはどういうことか？
BootstrapのCarouselのサンプルコードを例にすると、

carousel-itemにはdisplay noneが効いている
activeにはdisplay blockが効いている

という状態です。

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: First slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#777"/><text x="50%" y="50%" fill="#555" dy=".3em">First slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Second slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#666"/><text x="50%" y="50%" fill="#444" dy=".3em">Second slide</text></svg>
    </div>
    <div class="carousel-item">
      <svg class="bd-placeholder-img bd-placeholder-img-lg d-block w-100" width="800" height="400" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img" aria-label="Placeholder: Third slide"><title>Placeholder</title><rect width="100%" height="100%" fill="#555"/><text x="50%" y="50%" fill="#333" dy=".3em">Third slide</text></svg>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

activeクラスを動的に切り替えることでカルーセルの動作が実現されています。
なので、v-forで作成される要素そのものにactiveクラスをつけても、全てが表示されてしまいます・・・

 <div id="carouselControls" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
     <!-- 画像が全部表示される -->
     <div
      class="photos carousel-item active"
      v-for="(src, index) in job.business.photos" :key="index"
      >
        <img class="preview" :src="'/storage/'+src"/>
     </div>
  </div>
</div>

ポイントはv-bindを使ってactiveクラスを動的につけること

 <div id="carouselControls" class="carousel slide" data-ride="carousel">
   <div class="carousel-inner">
      <div
         class="photos carousel-item"
         :class="{ 'active': index === activeCarousel }"
         v-for="(src, index) in job.business.photos" :key="index"
         >
           <img class="preview" :src="'/storage/'+src"/>
     </div>
  </div>
    <!-- clickイベント「setActiveCarousel」を追加 -->
  <a class="carousel-control-prev" href="#carouselControls" role="button" data-slide="prev" @click="setActiveCarousel(activeCarousel-1)">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
     <!-- clickイベント「setActiveCarousel」を追加 -->
  <a class="carousel-control-next" href="#carouselControls" role="button" data-slide="next" @click="setActiveCarousel(activeCarousel+1)">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
     <span class="sr-only">Next</span>
  </a>
 </div>


<script>
export default {

 data() {
    return {
     job: {
       business: {
          photos: [],
        },
      },
     activeCarousel: 0,
    }
 },
 methods: {
    setActiveCarousel(index) {
                let activeCarousel = index;
                if (index === this.job.business.photos.length) {
                    activeCarousel = 0;
                } else {
                    if (index === -1) {
                        activeCarousel = this.job.business.photos.length -1;
                    }
                    this.activeCarousel = activeCarousel;
                }
            },
   },
}
</script>

setActiveCarouselというmethodを作成して、PreviousボタンとNextボタン（👇画像のあれ）が押された時の処理を追加！

完璧な動作ではないかもですが、、、これでv-for + Bootstrapで画像のカルーセルを実装することができました！！！

参考