滑动滑块在Vue组件中不起作用

Question

I am trying to use the slick slider in a .vue component but I get an error.

.slick is not a function

I have made all the setup requirements. This is the code am using:

    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>

My phpstorm does not allow ES6 and am suspecting that it might be the issue.

Here is a fiddle with my code: JSfiddle

Answer 1

You can see the working fiddle here .

I am not getting the error you are getting. However it was not working earlier as the code: $('.gallery').slick({ was defined in mount block, but given that you are getting the data in async way, I have moved this to updated block which will be executed after your data is updated.

Following is working vue code:

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