Vue.js多按钮滑块

Question

我正在使用vuejs创建多按钮滑块。我从图像滑块获取参考，但是它不起作用。这是用于单个图像滑块。我还从称为Carousel的引导Vue图像滑块中获得了帮助。我无法修改它。所以我尽了最大努力，但结果没有实现。在我的按钮滑块中，我想一次显示4个按钮，而我有12个以上的按钮，这是一个循环，另外还有上一个和下一个按钮。首先它应该显示4个按钮，然后当我单击下一个按钮后，它应该逐渐显示下一个4个按钮，然后像这样继续显示下一个4个按钮。这样，当我单击上一个按钮时，它必须向后显示4个按钮。我的问题是，首先出现4个按钮，但是当我单击下一个按钮时，只有一个按钮出现，这是我的问题。我想一次显示四个按钮。请注意，jQuery无法正常工作。我正在将vuejs与bootstrap vue一起使用。

<template>
    <b-row class="mt-3 mb-3">
            <b-col lg="1" >
              <i class="fa fa-chevron-circle-left fa-2x" @click.stop="changeSlide(-1)"></i>
            </b-col>

            <b-col lg="10" class="mb-2">
              <b-row>
                <b-col lg="3"  v-for="(route, index) in routes" :key="route.id" class="changeSlideButton">
                  <button type="button"
                          class="btn btn-primary "
                          id="routeCard"
                          @click="showScheduleOfRoute(route.id, route.departure, route.destination)">
                    {{route.departure}} to {{route.destination}}
                  </button>
                </b-col>
              </b-row>
            </b-col>



    <b-col lg="1 text-right">
              <i class="fa fa-chevron-circle-right fa-2x" @click.stop="changeSlide(1)"></i>
            </b-col>

</template>

所以下面是我的Java脚本代码，我可以在其中从路由获取数据，

java脚本代码：

  <script>
    export default {
    name: 'view',
    data () {
      return {
        routes: [
          {
            id: 1,
            departure: 'X',
            destination: 'Y'
          },
          {
            id: 2,
            departure: 'Y',
            destination: 'X'
          },
          {
            id: 3,
            departure: 'C',
            destination: 'Z'
          },
          {
            id: 4,
            departure: 'Z',
            destination: 'X'
          },
          {
            id: 5,
            departure: 'F',
            destination: 'Y'
          },
          {
            id: 6,
            departure: 'Y',
            destination: 'F'
          },
          {
            id: 7,
            departure: 'G',
            destination: 'H'
          },
          {
            id: 8,
            departure: 'K',
            destination: 'L'
          }
        ],
        route: {
          departure: '',
          destination: '',
         },
        slideIndex: 1
    methods: { 
      changeSlide: function (n) {
        this.showDivs(this.slideIndex += n)
      },
      showDivs: function (slideIndex) {
        let i, x, n
        x = document.getElementsByClassName('changeSlideButton')
        console.log('hello 1234')
        console.log(x)
        if (n > x.length) {
          slideIndex = 1
        }
        if (n < 1) {
          slideIndex = x.length
        }
        for (i = 0; i < x.length; i++) {
          x[i - 1].style.display = 'none'
        }
        x[slideIndex - 1].style.display = 'block'
      }
    }
  }
</script>