Saya menggunakan vue-awesome-swiper dan saya ingin dapat menampilkan atau menyembunyikan tombol Berikutnya/Sebelumnya pada kondisi tertentu.

Secara khusus, ketika slide telah mencapai awal, itu harus menunjukkan tombol NEXT, kemudian ketika mencapai akhir, itu harus menyembunyikan tombol itu dan menampilkan tombol SEBELUMNYA.

Jika memungkinkan, saya ingin itu ditetapkan sebagai variabel yang dapat digunakan oleh v-if. Bagaimana cara saya melakukannya?

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;
    }
  }
});
0
Artvader 30 Oktober 2019, 05:45

2 jawaban

Jawaban Terbaik

Saya menemukan bahwa jawabannya terletak pada pengikatan instance ke variabel. Kode terakhir akan terlihat seperti ini:

data() {
const self = this; // this is the line that fixes it all
return { 
  reachedEnd: false,
  swiperNavMenu: {
    on: {
      reachEnd: function(){
        self.reachedEnd=true
      }
    }
  }
 };
},

Masih terima kasih kepada gula untuk menunjukkan jalannya.

0
Artvader 1 November 2019, 03:14

Masalah Anda terkait bahwa variabel reachedBeginning dan reachedEnd tidak didefinisikan

...
data() {
  return {
    reachedBeginning: false,
    reachedEnd: false,
    swiperNavMenu: {
      freeMode: true,
      slidesPerView: 5.75,
      on: {
        reachBeginning: ()=> {
          this.reachedBeginning = true; 
        },
        reachEnd: ()=> {
          this.reachedEnd = true;
        }
      }
    }
  }  
},
...
1
sugars 30 Oktober 2019, 03:41