I need to call the function after the document is ready, because i need access to the css class dot.
mounted () {
$(this).ready(function () {
this.methods.addSlick()
})
},
methods: {
addSlick () {
$(this.$refs.yourClass).slick({
slidesToShow: 1,
slidesToScroll: 1,
mobileFirst: true,
ininite: false,
dots: true,
customPaging (slider, i) {
return '<span class="dot">s</span>'
}
})
}
}
Error in the Console:
jquery.js?1157:3827 Uncaught TypeError: Cannot read properties of undefined (reading 'addSlick')
at HTMLDocument.eval (ProductSlider.vue?5b8f:30:1)
at mightThrow (jquery.js?1157:3534:1)
at process (jquery.js?1157:3602:1)
eval @ ProductSlider.vue?5b8f:30
mightThrow @ jquery.js?1157:3534
process @ jquery.js?1157:3602
setTimeout (async)
the error message tells you that you are trying to access addSlick of undefined, that means this.methods in your first code block is undefined. This happens, because you're wrapping it in a jQuery ready call which changes the this context which is not what you want here. The ready call is not necessary, because if you execute something in mounted you can be sure that your ref yourClass is available in the dom.
If you remove lines 2 and 4 from your first code block the error message should be fixed.