javascript - 如何设置 vue 可以读取的变量来对 swiper 的事件处理程序使用react

Question

我正在使用 vue-awesome-swiper，我希望能够在特定条件下显示或隐藏下一个/上一个按钮。

具体来说，当幻灯片到达开头时，它应该显示“下一个”按钮，然后当它到达末尾时，它应该隐藏该按钮并显示“上一个”按钮。

如果可能的话，我希望将其设置为 v-if 可以 Hook 的变量。我该如何去做呢？

HTML

   <div id="swiper">
<div class="menu-tabs-icon-label">
    <swiper ref="productMenu" :options="swiperNavMenu">
        <swiper-slide>
            <div class="nav-item">
                <a href="#"> Item 1 </a>
            </div>
        </swiper-slide>
        <swiper-slide>
            <div class="nav-item">
                <a href="#"> Item 2 </a>
            </div>
        </swiper-slide>
        <swiper-slide>
            <div class="nav-item ">
                <a href="#"> Item 3 </a>
            </div>
        </swiper-slide>
    <div v-if="reachedEnd" class="swiper-button-prev" slot="button-prev"></div>
    <div v-if="reachedBeginning" class="swiper-button-next" slot="button-next"></div> 
    </swiper>
    </div>
</div>

JS

  new Vue({
  el: "#swiper",
  components: {
    LocalSwiper: VueAwesomeSwiper.swiper,
    LocalSlide: VueAwesomeSwiper.swiperSlide
  },
  data: {
    swiperNavMenu: {
      freeMode: true,
      slidesPerView: 5.75,
      on: {
        reachBeginning: function() {
          reachedBeginning = true; 
        },
        reachEnd: function() {
          reachedEnd = true;
        }
      }
    }
  },
  computed: {
    swiperA() {
      return this.$refs.productMenu.swiper;
    }
  }
});

Answer 1

您的问题与未定义 reachedBeginning 和 reachedEnd 变量有关

...
data() {
  return {
    reachedBeginning: false,
    reachedEnd: false,
    swiperNavMenu: {
      freeMode: true,
      slidesPerView: 5.75,
      on: {
        reachBeginning: ()=> {
          this.reachedBeginning = true; 
        },
        reachEnd: ()=> {
          this.reachedEnd = true;
        }
      }
    }
  }  
},
...