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

#はじめに
[BootstrapのCarousel](https://getbootstrap.jp/docs/4.3/components/carousel/)で表示される画像を、Vue.jsの`v-for`を使って実装するにはどうしたらいいか？を解説します！
![スクリーンショット 2021-09-29 15.17.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/770e6c6d-0ba7-3c23-f57b-d5700fcd8ec6.png)


**※[BootstrapVue](https://bootstrap-vue.org)ではなく、普通のBootstrapを使った場合です！！！**

#環境
・Vue.js v2系
・Bootstrap v4系



#htmlを編集するだけでは実現できないっぽい
これはどういうことか？
[BootstrapのCarousel](https://getbootstrap.jp/docs/4.3/components/carousel/)のサンプルコードを例にすると、

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

という状態です。

```html
<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`クラスをつけても、全てが表示されてしまいます・・・

```html
 <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クラスを動的につけること

```vue
 <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ボタン（👇画像のあれ）が押された時の処理を追加！
![スクリーンショット 2021-09-30 22.42.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/167220/5093a3ed-b0eb-c01d-9cde-4c962f1b19da.png)


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






#参考

https://stackoverflow.com/questions/68353490/how-to-use-bootstrap-carousel-in-vue-js