Slick slider не работает в компонентах vue

Question

Я пытаюсь использовать slick slider в компоненте .vue, но я получаю сообщение об ошибке.

.slick не является функцией

Я сделал все требования к установке. Это код я использую:

new Vue({ 
    el: '#app', 
    data: { 
     slider: null 
    }, 
    methods: { 
     selectImage: function() { 
      //http call here 
      return images 
     } 
    }, 
    mounted: function() { 
     this.slider = $('.gallery').slick({ 
      animation: true 
     }); 
    } 
}); 

<div class='gallery'> 
    <div v-for="img in images" @click="selectImage(img)"> 
    <img v-bind:src="img.url"> 
    </div> 
</div> 

Мой PhpStorm не позволяет ES6 и я подозревая, что это может быть проблемой.

Вот скрипка с моим кодом: JSfiddle

Answer 1

Вы можете увидеть рабочую скрипку here.

Я не получаю ошибку, которую вы получаете. Однако он не работал раньше, поскольку код кода: $('.gallery').slick({ был определен в блоке mount, но, учитывая, что вы получаете данные по-разному, я переместил его в блок updated, который будет выполнен после обновления ваших данных.

Ниже работает код вю:

var app = new Vue({ 
    el: "#gallery", 
    data: function() { 
    return { 
     images: [], 
     slider: null 
    } 
    }, 
    mounted() { 
    var that = this 
    setTimeout(function() { 
     that.images.push('http://devcereal.com/wp-content/uploads/2016/05/URL-URI-URN-whats-difference.png') 
     that.images.push('http://www.shawacademy.com/blog/wp-content/uploads/2015/10/URL-1000x605.jpg') 

    }, 300) 
    }, 
    updated() { 
     $('.gallery').slick({ 
     autoplay: true, 
     dots: true, 
     responsive: [{ 
      breakpoint: 500, 
      settings: { 
      dots: false, 
      arrows: false, 
      infinite: false, 
      slidesToShow: 2, 
      slidesToScroll: 2 
      } 
     }] 
     }); 
    } 
})