Question

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

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

位于

--->在src / components / Meetup / Meetups.vue                       在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软件包，但错误仍然存在。如何解决？

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')
      })
    })
  }

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

1 个答案: