[Vue warn]: Invalid handler for event "lazyLoadError": got undefined

Question

I am using vue js with laravel. I am adding Vue component for Slick-carousel and I am getting below error

[Vue warn]: Invalid handler for event "lazyLoadError": got undefined

here is 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 got from 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>

Error change when I remove @lazyLoadError="handleLazeLoadError" or we can say all options are showing error.

kingdaro kingdaro · Accepted Answer · 2018-04-02T05:56:17

The methods that the template is looking for aren't in the component definition for the template. They're in the new Vue() instance you're making inside of it:

<script>
  import Slick from 'vue-slick';

  export default {
    mounted() {
      this.News_list = JSON.parse(this.news)

      new Vue({
        // handleX methods are inside of here
      });
    },

    methods: {
      // they should be here
    }
  }
</script>

This is something proper formatting and indentation would have made more obvious. I'd suggest looking into a formatter like prettier.

Also, making a new Vue instance inside of a Vue component can lead to some really nasty side-effects and non-descript code. Your app should consist of only one new Vue at the top level, which uses all the rest of your components.

[Vue warn]: Invalid handler for event "lazyLoadError": got undefined

1 Answers