Vue/Nuxt项目中Flickity轮播change事件拖拽时不触发问题问询

根因 #

1. 你当前绑定的change事件仅在轮播切换动画完全结束后才会触发，拖拽滑动时触发时机严重滞后，甚至滑动中断时不会触发，导致索引无法实时更新。
2. 手动通过this.$refs.flickity.on绑定原生事件的方式，容易受Flickity实例初始化时序、组件重绘（你配置了componentKey变更会触发Flickity重建）影响，导致监听失效。

修改步骤 #

1. 模板部分调整 #

给Flickity组件添加Vue原生事件绑定，替换手动绑定事件的方式：

<Flickity
  ref="flickity"
  :options="flickityOptions"
  class="carousel-band-cards-row"
  :key="componentKey"
  <!-- 新增select事件绑定，只要选中slide变更就触发回调 -->
  @select="onSlideChange"
>

2. JS逻辑调整 #

删除原来的slideEventListener方法及mounted中的调用，新增回调方法：

export default {
  // 原有props、data等逻辑保持不变
  mounted() {
    // 删除原有 this.slideEventListener() 调用
  },
  methods: {
    goToSlide(i) {
      this.$refs.flickity.select(i);
      this.currentSlide = i;
    },
    // 新增索引更新回调
    onSlideChange() {
      // 直接从实例获取当前选中索引，比事件传参兼容性更强
      this.currentSlide = this.$refs.flickity.selectedIndex
    }
  }
}

如果需要拖拽过程中就实时更新索引，再额外给Flickity组件绑定@dragMove="onSlideChange"即可。

内容的提问来源于stack exchange，提问作者hendy0817