Экземпляр Swiper некорректно работает с Vue. js - PullRequest
Новая
       17

Экземпляр Swiper некорректно работает с Vue. js

0 голосов
/ 05 апреля 2020

У меня возникли проблемы с созданием плагина wordpress на основе swiper и vue. js, работающего правильно. Я создал виджет, который будет отображать ленту instagram publi c, используя JSON. Чтобы сделать его более реактивным, я использовал Vue. js fo l oop поверх данных, которые будут предоставлены фидом, и это работает правильно. У меня странная проблема с vue. js и swiper, навигационные стрелки не будут работать, и я не знаю почему. Я думаю, что это может быть связано с инициализацией swiper или vue, которая заполняет div изображениями, используя v-for слишком поздно. У меня есть метод, который вызывает axios.get для извлечения данных, этот метод вызывается внутри смонтированного свойства моего экземпляра vue. можно ли это исправить? 

<div class="swiper-container swiper-feed" id="ig-feed">
        <div class="swiper-wrapper">
          <div v-for="img in feedImg" class="swiper-slide feed-img" v-bind:style="{ backgroundImage: 'url('+img.url+')' }"></div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
      </div>
// JS
(function($){
  $(document).ready(function(){
    //console.log(igfeed);
    const feedSwiper = new Swiper('.swiper-feed', {
      slidesPerView: 4,
      spaceBetween: 50,
      slidesPerGroup: 4,
      loop: true,
      autoplay: {
        delay: 5000
      },
      //loopFillGroupWithBlank: true,
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
    console.log('done');

    // var mySwiper = document.querySelector('.swiper-feed').swiper
    //
    // // Now you can use all slider methods like
    // mySwiper.slideNext();

    const igFeed = new Vue({
      el: '#ig-feed',
      data: {
        feedImg: []
      },
      mounted: function(){
        axios.get(igfeed.profile_url).then( (response) => {
          console.log(response);
          response.data.graphql.user.edge_owner_to_timeline_media.edges.forEach( (item ,i) => {
            //console.log(item.node.display_url);
            f = {
              url: item.node.display_url
            };
            this.feedImg.push(f);
          });
        });
      },
      methods: {
        prevSlide: function(){
          //var feedSwiper = document.querySelector('.swiper-feed').Swiper;
          //console.log(feedSwiper);
          feedSwiper.slidePrev();
          console.log('clicked prev');
        },
        nextSlide: function(){
          feedSwiper.slideNext();
        }
      }
    });


  });
}(jQuery));
...