VueJS + Vue-Flickity TypeError: WEBPACK_IMPORTED_MODULE_0_vue_flickity.a不是构造函数

Question

我使用的是Vue-Flickity，无法找到解决此错误的方法：

Vue警告:nextTick中的错误："TypeError: TypeError不是构造函数“ 找到位置 -> at src/components/Meetups.vue at src/App.vue vue.esm.js?efeb:1841 TypeError: VueComponent.eval (Meetups.vue?41ab:1113) at Array.eval (vue.esm.js?efeb:1938) at flushCallbacks (vue.esm.js?efeb:1857)不是构造函数

下面是相关代码：

<flickity ref="flickity" :options="flickityOptions">
<div class="carousel-cell">
<span>1</span>
</div>
</flickity>

脚本

import Flickity from 'vue-flickity'
export default {
  components: {
    Flickity
  },
  data () {
    return {
      flickityOptions: {
        dragThreshold: 20,
        initialIndex: 1,
        selectedAttraction: 0.2,
        friction: 0.8,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: false,
        hash: true,
        percentPosition: false
      },
[...]
      mounted () {
        this.$nextTick(() => {
          const flkty = new Flickity(this.$refs.flickity, this.flickityOptions)
          // EVENTS
          flkty.on('ready', function () {
            console.log('Flickity is ready!')
          })
          flkty.on('dragStart', function () {
            console.log('dragStart')
          })

我更新了所有NPM包，但错误仍然存在。怎么修呢？

Answer 1

因为您将Flickity导入为Vue组件。

import Flickity from 'vue-flickity'

那么您就不能创建它的新实例，例如

const flkty = new Flickity(this.$refs.flickity, this.flickityOptions)

请尝试

  mounted () {
    this.$nextTick(() => {
      // EVENTS
      this.$refs.flickity.on('ready', function () {
        console.log('Flickity is ready!')
      })
      this.$refs.flickity.on('dragStart', function () {
        console.log('dragStart')
      })
    })
  }