我正在尝试将Vue data实现到Bootstrap carousel中

data() {
  return {
    images: [
      'image1.jpg',
      'image2.jpg',
      'image3.jpg'
    ],
    currentIndex: 0
  }
}

<div id="carousel" class="carousel slide">
  <div class="carousel-inner">
    <div v-for="(image, index) in images" :key="index" :class="{ 'carousel-item': true, 'active': index === currentIndex }">
      <img :src="image" class="d-block w-100" alt="Slide">
    </div>
  </div>
</div>

methods: {
  nextSlide() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
  },
  prevSlide() {
    this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
  }
}

<a class="carousel-control-prev" href="#" role="button" @click="prevSlide">
  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  <span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#" role="button" @click="nextSlide">
  <span class="carousel-control-next-icon" aria-hidden="true"></span>
  <span class="sr-only">Next</span>
</a>