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
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
}
}]
});
}
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With