naver / egjs-flicking

🎠 ♻️ Everyday 30 million people experience. It's reliable, flexible and extendable carousel.
https://naver.github.io/egjs-flicking/
MIT License
2.69k stars 129 forks source link

nuxt에서 flicking-plugins 사용 시 에러발생 #821

Open emthrology opened 11 months ago

emthrology commented 11 months ago

Description

<template>
    <Flicking :options="options" :plugins="autoplay">
      <slot></slot>
  </Flicking>
</template>

<script>
import { Autoplay } from "@egjs/flicking-plugins";
import common from '@/utils/common.js'
export default {
  name: 'flicking-slide',
  mixins: [common],
  props: {
    options: {
      type: Object,
      default: {}
    },
  },
  computed: {
    plugins() {
      return [new Autoplay({
        duration: 3000,
        direction: "NEXT",
        easing: function (x) {
          return 1 - Math.pow(1 - x, 3);
        },
      })]
    }
  },
  created () {
    this.autoplay = plugins;
  },
  data() {
    return {
      autoplay: null,
    }
  },

}
</script>

Flicking은 nuxt plugins 폴더에 선언해서 쓰고있습니다. 위와 같이 컴포넌트를 구성하여 화면에 쓰려고 했는데 flicking.esm.js 파일에서 에러가 발생합니다

Steps to check or reproduce

malangfox commented 11 months ago

안녕하세요 @emthrology 님.

남겨주신 현상과 관련하여 어떠한 에러 메시지가 표시되는지 저희가 확인해볼 수 있을까요?

emthrology commented 11 months ago

안녕하세요 @emthrology 님.

남겨주신 현상과 관련하여 어떠한 에러 메시지가 표시되는지 저희가 확인해볼 수 있을까요?

TypeError: Cannot convert undefined or null to object
at slice (<anonymous>)
at __proto.update (list-differ.esm.js:385:1)
at VueComponent._checkPlugins (flicking.esm.js:506:1)
at VueComponent.updated (flicking.esm.js:440:1)
at invokeWithErrorHandling (vue.runtime.esm.js:3017:1)
at callHook$1 (vue.runtime.esm.js:4031:1)
at callUpdatedHooks (vue.runtime.esm.js:4154:1)
at flushSchedulerQueue (vue.runtime.esm.js:4140:1)
at Array.eval (vue.runtime.esm.js:3143:1)
at flushCallbacks (vue.runtime.esm.js:3065:1)

이렇게 드려도 될까요