Как установить переменную, которую может прочитать vue, которая реагирует на обработчики событий swiper - PullRequest
Новая
       3

Как установить переменную, которую может прочитать vue, которая реагирует на обработчики событий swiper

0 голосов
/ 30 октября 2019

Я использую vue-awesome-swiper и хочу иметь возможность показывать или скрывать кнопки Next / Previous при определенных условиях.

В частности, когда слайд достиг начала, он должен показывать кнопку NEXT, затем, когда он достигает конца, он должен скрыть эту кнопку и вместо этого показывать кнопку PREVIOUS.

Если возможноЯ хотел бы, чтобы это было установлено как переменная, которую может зацепить v-if. Как мне это сделать?

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;
    }
  }
});

Ответы [ 2 ]

1 голос
/ 30 октября 2019

Ваша проблема связана с тем, что reachedBeginning и reachedEnd переменные не определены 

...
data() {
  return {
    reachedBeginning: false,
    reachedEnd: false,
    swiperNavMenu: {
      freeMode: true,
      slidesPerView: 5.75,
      on: {
        reachBeginning: ()=> {
          this.reachedBeginning = true; 
        },
        reachEnd: ()=> {
          this.reachedEnd = true;
        }
      }
    }
  }  
},
...
0 голосов
/ 01 ноября 2019

Я обнаружил, что ответ заключается в привязке экземпляра к переменной. Окончательный код должен выглядеть следующим образом: 

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

Тем не менее, благодаря сахарам за указание пути.

...