页面中的多个引导轮播无法正常工作

Question

我正在使用vue.js通过Bootstrap 3.3.7创建一个SPA网站，我的网站中有3个轮播，

这是我的轮播组件示例，

<template>
  <div id="myTourCarousel" class="carousel slide" data- 
   ride="carousel">
    <div class="carousel-inner carousel_body" v-if="SliderFor 
 =='Tour'">
  <div :class="[i == 0 ? 'item active ' : 'item']" v-for="(item,i) in getTour" :key="'T'+i">
    <img :src="item.image_url" class="carousel_image" :alt="item.image_url">
  </div>
</div>
<!-- Left and right controls -->
<div class="carousel_btn_holder">
  <a
    class="left carousel-control Tour_carousel_prev carousel_btns"
    href="#myTourCarousel"
    data-slide="prev"
  >
    <img src="../../assets/prev.svg" alt>
  </a>
  <div class="Tour_image_thumb_holder" v-if="SliderFor == 'Tour'">
    <img
      v-for="(item,i) in getTour ? getTour.slice(0, 5) : []"
      :key="i"
      :src="item.image_url"
      :alt="item.image_url"
      class="image_thumb"
    >
  </div>
  <a
    class="right carousel-control Tour_carousel_next carousel_btns"
    href="#myTourCarousel"
    data-slide="next"
  >
    <img src="../../assets/next.svg" alt>
  </a>
</div>

我有3个具有3个不同IDS的组件，添加图像后，轮播不会自动滚动，按钮也无法正常工作。

数据通过计算属性进入组件

但是它们有时会随机工作。以前有没有人遇到过这个问题。