VanillaJS 到 VueJS 错误：Flickity 的错误元素：轮播

我想得到这个轻快的例子 https://codepen.io/desandro/pen/RNQgpB(CodePen) 在 VueJS 组件中工作。

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

我收到此错误：

Flickity 的坏元素：轮播

My 不工作版本：

JS 数据 ()

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 () {
    flkty.on('dragStart', function () {
      this.stageDragging = true
      console.log('stageDragging: ' + this.stageDragging)
    })
    flkty.on('dragEnd', function () {
      this.stageDragging = false
      console.log('stageDragging: ' + this.stageDragging)
    })

如何使用这个轻快的例子 https://codepen.io/desandro/pen/RNQgpB在 VueJS 组件中？

In your <script>部分，JavaScript 在文档中呈现模板之前执行，因此 Flickity 将无法找到.carousel如果在钩子之外调用。 Vue 实例有一个mounted()生命周期钩子 https://v2.vuejs.org/v2/api/#mounted当它的模板呈现时被调用，这是您应该创建 Flickity 轮播的地方：

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

另外，而不是通过.carousel类名到 Flickity，传递一个ref https://v2.vuejs.org/v2/api/#ref to the .carousel元素以避免抓取意外的元素.carousel文档中的元素（例如，如果您有多个组件实例）。

// template
<div ref="carousel">

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

demo https://codesandbox.io/s/0or1orxr8v?module=%2Fsrc%2Fcomponents%2FCarousel.vue