[Vue 警告]：事件“lazyLoadError”的无效处理程序：未定义

Question

我正在使用 vue js 和 laravel。我正在添加Vue component for Slick-carousel，但我遇到了错误

[Vue 警告]：事件“lazyLoadError”的无效处理程序：未定义

这是我的代码

<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>

当我删除 @lazyLoadError="handleLazeLoadError" 时错误发生变化，或者我们可以说所有选项都显示错误。

Answer 1

模板正在寻找的方法不在模板的组件定义中。它们位于您在其中创建的 new Vue() 实例中：

<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>

这是适当的格式和缩进会更明显的东西。我建议研究像prettier 这样的格式化程序。

此外，在 Vue 组件中创建一个新的 Vue 实例可能会导致一些非常讨厌的副作用和无法描述的代码。您的应用应仅在顶层包含一个 new Vue，它使用您的所有其余组件。