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

问题描述

我正在尝试让 这个 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 示例?

解决方案

在您的 部分，JavaScript 在模板在文档中呈现之前执行，因此 Flickity 不会如果在钩子外调用，则能够找到 .carousel.Vue 实例有一个被调用的 mounted() 生命周期钩子当它的模板已经呈现时，您应该在此处创建 Flickity 轮播:

//const flkty = new Flickity(...)//不要在这里做导出默认{安装(){this.$nextTick(() => {const flkty = new Flickity(...)//...});}}

此外，不要将 .carousel 类名传递给 Flickity，而是传递一个 ref 到 .carousel 元素，以避免抓取文档中意外的 .carousel 元素(例如，如果您有多个组件实例).

//模板<div ref="轮播">//脚本新的 Flickity(this.$refs.carousel)

演示

I'm trying to get this Flickity example (CodePen) to work in a VueJS component.

HTML

<div class="carousel">
  <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>
</div>

JS

 var flkty = new Flickity('.carousel');

    flkty.on( 'dragStart', function() {
      console.log('dragStart');
    });

I get this error:

My not working version:

JS data ()

import Flickity from 'flickity'
var flkty = new Flickity('.carousel')
export default {
  data () {
    return {
      flickityOptions: {
        dragThreshold: 50,
        initialIndex: 1,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: false,
        hash: true,
        percentPosition: false
      },

JS mounted ()

  mounted () {
    flkty.on('dragStart', function () {
      this.stageDragging = true
      console.log('stageDragging: ' + this.stageDragging)
    })
    flkty.on('dragEnd', function () {
      this.stageDragging = false
      console.log('stageDragging: ' + this.stageDragging)
    })

How to use this Flickity example in a VueJS component?

解决方案

In your <script> section, the JavaScript executes before the template has been rendered in the document, so Flickity wouldn't be able to find .carousel if called outside a hook. Vue instances have a mounted() lifecycle hook that gets called when its template has rendered, which is where you should create the Flickity carousel:

// const flkty = new Flickity(...) // DON'T DO THIS HERE
export default {
  mounted() {
    this.$nextTick(() => {
      const flkty = new Flickity(...)
      // ...
    });
  }
}

Also, instead of passing the .carousel classname to Flickity, pass a ref to the .carousel element in order to avoid grabbing an unexpected .carousel element in the document (e.g., if you had multiple component instances).

// template
<div ref="carousel">

// script
new Flickity(this.$refs.carousel)

demo

这篇关于VanillaJS 到 VueJS 错误:Flickity 的坏元素:轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！