使用carousel在Nuxt应用程序中抛出"Flickity is not defined“的自定义按钮

Question

我正在尝试将我自己的自定义按钮连接到nuxt应用程序中的flickity carousel。在我的carousel组件中，我有以下代码

<template>
    <ClientOnly>
        <Flickity
            ref="flickity"
            :key="keyIncrementer"
            class="carousel"
            :class="{ 'carousel--active': active }"
            :options="computedOptions"
        >
            <slot />
        </Flickity>
    </ClientOnly>
</template>

<script>
export default {
  beforeCreate() {
      var flkty = new Flickity(".carousel");
      // previous
      var previousButton = document.querySelector('.button--previous')
      previousButton.addEventListener('click', function () {
          flkty.previous()
      })
      // next
      var nextButton = document.querySelector('.button--next')
      nextButton.addEventListener('click', function () {
          flkty.next()
      })
  },
  beforeDestroy() {
      window.removeEventListener('resize', this.debounceRefresh)
      nextButton.removeEventListener('click', function () {
          flkty.next()
      })
      previousButton.removeEventListener('click', function () {
          flkty.previous()
      })
  },
}
</script>

在我的plugins文件夹中有一个vue-flickity.js文件

import Vue from 'vue'
import Flickity from 'vue-flickity'

Vue.component('Flickity', Flickity)

无需尝试使用我自己的自定义按钮，旋转木马就可以正常工作。但是对于自定义按钮，我得到了一条错误消息ReferenceError Flickity is not defined，这一行是=>，var flkty = new Flickity(".carousel");和Missing stack frames，我显然是做错了什么，但是什么呢？

Answer 1

在new Flickity()中使用Flickity时，假设Flickity构造函数(来自flickity package)是全局定义的(可能是由vue-flickity定义的)，但事实并非如此。而且，flickity和vue-flickity并不打算像这样同时使用。

要将vue-flickity的next/previous方法绑定为您自己的按钮的处理程序，请在调用this.$refs.flickity.next()/this.$refs.flickity.previous()的按钮上使用@click处理程序

<Flickity ref="flickity" class="carousel">...</Flickity>
<button @click="next">Next</button>
<button @click="prev">Prev</button>

export default {
  methods: {
    next() {
      this.$refs.flickity.next()
    },
    prev() {
      this.$refs.flickity.previous()
    },
  },
}

这实际上是来自vue-flickity usage docs的相同示例。

demo