Currently, I am utilizing the combination of vue js and laravel. To enhance my project, I decided to incorporate a Vue component for Slick-carousel, but encountered the following error:
[Vue warn]: Invalid handler for event "lazyLoadError": got undefined
Here is a snippet of my code:
<template id="home-content">
<div>
<div class="home-content-2-wrapper col-md-12" v-if="News_list.length > 0">
<div class="home-content-2">
<div class="hc2-title-wrapper col-md-12">
<p class="hc2-title">
News
</p>
</div>
<div id="demo">
<slick ref="slick" :options="slickOptions"
@afterChange="handleAfterChange"
@beforeChange="handleBeforeChange"
@breakpoint="handleBreakpoint"
@destroy="handleDestroy"
@edge="handleEdge"
@init="handleInit"
@reInit="handleReInit"
@setPosition="handleSetPosition"
@swipe="handleSwipe"
@lazyLoaded="handleLazyLoaded"
@lazyLoadError="handleLazeLoadError">
<a href="http://placehold.it/500x500"><img src="http://placehold.it/500x500" alt=""></a>
<a href="http://placehold.it/500x500"><img src="http://placehold.it/500x500" alt=""></a>
<a href="http://placehold.it/500x500"><img src="http://placehold.it/500x500" alt=""></a>
<a href="http://placehold.it/500x500"><img src="http://placehold.it/500x500" alt=""></a>
<a href="http://placehold.it/500x500"><img src="http://placehold.it/500x500" alt=""></a>
</slick>
</div>
</div>
</div>
</div>
</template>
<script>
import Slick from "vue-slick";
export default {
name: "News",
props: ["news"],
data() {
return {
News_list: []
};
},
methods: {
expandBottom(name) {
console.log("exapanding");
// $('.'+ name +'').toggleClass("active");
}
},
mounted() {
this.News_list = JSON.parse(this.news);
new Vue({
components: { Slick },
el: "#demo",
data() {
return {
slickOptions: {
slidesToShow: 3
// Any other options that can be found in the plugin documentation
}
};
},
methods: {
next() {
this.$refs.slick.next();
},
prev() {
this.$refs.slick.prev();
},
reInit() {
this.$nextTick(() => {
this.$refs.slick.reSlick();
});
},
handleAfterChange(event, slick, currentSlide) {
console.log("handleAfterChange", event, slick, currentSlide);
},
handleBeforeChange(event, slick, currentSlide, nextSlide) {
console.log(
"handleBeforeChange",
event,
slick,
currentSlide,
nextSlide
);
},
handleBreakpoint(event, slick, breakpoint) {
console.log("handleBreakpoint", event, slick, breakpoint);
},
handleDestroy(event, slick) {
console.log("handleDestroy", event, slick);
},
handleEdge(event, slick, direction) {
console.log("handleEdge", event, slick, direction);
},
handleInit(event, slick) {
console.log("handleInit", event, slick);
},
handleReInit(event, slick) {
console.log("handleReInit", event, slick);
},
handleSetPosition(event, slick) {
console.log("handleSetPosition", event, slick);
},
handleSwipe(event, slick, direction) {
console.log("handleSwipe", event, slick, direction);
},
handleLazyLoaded(event, slick, image, imageSource) {
console.log("handleLazyLoaded", event, slick, image, imageSource);
},
handleLazeLoadError(event, slick, image, imageSource) {
console.log("handleLazeLoadError", event, slick, image, imageSource);
}
}
});
window.addEventListener("scroll", function() {
if (this.scrollY > 550) {
$(".hc1-title-wrapper").addClass("active");
}
});
}
};
</script>
The error persists even after removing
@lazyLoadError="handleLazeLoadError"