0

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

[Vue 警告]：nextTick 中的错误：“TypeError： WEBPACK_IMPORTED_MODULE_0_vue_flickity .a 不是构造函数”

在发现

---> at src/components/Meetup/Meetups.vue at src/App.vue vue.esm.js?efeb:1841 TypeError: WEBPACK_IMPORTED_MODULE_0_vue_flickity .a 不是 VueComponent.eval 的构造函数 (Meetups.vue?41ab:1113 ) 在 Array.eval (vue.esm.js?efeb:1938) 在 flushCallbacks (vue.esm.js?efeb:1857)

以下是相关代码： HTML

<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 包，但错误仍然存​​在。如何解决？

4

1 回答 1

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')
      })
    })
  }
于 2019-04-30T02:37:19.663 回答