I am trying to use the slick slider in a .vue ponent 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

I am trying to use the slick slider in a .vue ponent 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

• javascript
• slider
• vuejs2

• I hope this is the last carousel you'll ever need :P Possible to create a fiddle of it? – Saurabh Commented Jan 23, 2017 at 6:22
• I used the foundation orbit but it does not work with dynamically loaded images using v-for. Looking for a slider that does is a nightmare – Phillis Peters Commented Jan 23, 2017 at 6:23
• Have you added this line in your HTML/index.html: <script type="text/javascript" src="slick/slick.min.js"></script> – Saurabh Commented Jan 23, 2017 at 6:24
• Yes. I have. I have also added the slick.css file – Phillis Peters Commented Jan 23, 2017 at 6:26
• Here is an implementation of carousel with bootstrap for your reference and here is for slick, Can you please create a fiddle for your code, which can help people answer here your question. – Saurabh Commented Jan 23, 2017 at 6:33

1 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./wp-content/uploads/2016/05/URL-URI-URN-whats-difference.png')
      that.images.push('http://www.shawacademy./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
          }
        }]
      });
  }
})