VanillaJS 到 VueJS 错误:Flickity 的坏元素:轮播

本文介绍了VanillaJS 到 VueJS 错误:Flickity 的坏元素:轮播的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

我正在尝试让 这个 Flickity 示例 (CodePen) 在 VueJS 中工作成分.

HTML

<div class="carousel-cell"></div><div class="carousel-cell"></div><div class="carousel-cell"></div><div class="carousel-cell"></div><div class="carousel-cell"></div>

JS

 var flkty = new Flickity('.carousel');flkty.on( 'dragStart', function() {console.log('dragStart');});

我收到此错误:

<块引用>

Flickity 的坏元素:轮播

我的不工作版本:

JS数据()

从'flickity'导入Flickityvar flkty = new Flickity('.carousel')导出默认{数据 () {返回 {轻弹选项:{阻力阈值:50，初始索引:1，prevNextButtons: 假，pageDots:假，环绕:假，哈希:真实，百分比位置:假},

JS 挂载()

 挂载 () {flkty.on('dragStart', function () {this.stageDragging = trueconsole.log('stageDragging:' + this.stageDragging)})flkty.on('dragEnd', function () {this.stageDragging = falseconsole.log('stageDragging:' + this.stageDragging)})

如何在 VueJS 组件中使用 这个 Flickity 示例?

解决方案

在您的