vue-flickity：如何将 selectedIndex 获取到 vue 数据中

Question

我正在使用 vue-flickity 作为轮播。有一个 <flickity /> 组件（旋转木马），一个带有数据 {{ selectedIndex }} 的 <p> 标签，以及一个从 flickity 获取当前幻灯片编号并更新 selectedIndex 的按钮].

当用户向左或向右滚动（即调用 Next/Previous 方法）时，如何使用当前幻灯片索引自动更新 selectedIndex？我正在努力“挂钩”模块的那些方法。

我可以定义一个方法 Next() 并将其绑定到按钮，但它不会在用户滚动时更新。

编辑： 我已经成功连接到 on.change（使用 mounted）。 console.log 现在向我展示了正确的 selectedInde，但这并没有反应到它说“你在幻灯片编号 {{ selectedIndex }}”的地方

<template>
  <div>
    <flickity ref="flickity" :options="flickityOptions">
      <div class="carousel-cell">1</div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
      <div class="carousel-cell">4</div>
      <div class="carousel-cell">5</div>
    </flickity>
    <p>You are at Slide number {{ selectedIndex }}</p>
    <button @click="manualUpdate()">Update</button>
  </div>
</template>

<script>
import Flickity from 'vue-flickity'

export default {
  components: {
    Flickity
  },
  data() {
    return {
      flickityOptions: {
        initialIndex: 0,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: true
      },
      selectedIndex: 0
    }
  },
  methods: {
    manualUpdate() {
      this.selectedIndex = this.$refs.flickity.selectedIndex();
      console.log(this.selectedIndex)
    },
  },
  mounted() {
    this.$refs.flickity.on('change', function (event) {
      this.selectedIndex = event
      console.log(this.selectedIndex)
    })
  }
}
</script>

<style>
/* external css: flickity.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.carousel-cell {
  width: 80%;
  min-height: 50vh;
  max-height: 80vh;
  object-fit: contain;
  margin-right: 10px;
}
</style>

Answer 1

正如对此 Github issue 的解释，您需要在 init 事件上绑定侦听器。
最终结果如下所示：

<template>
  <div>
    <flickity ref="flickity" :options="flickityOptions" @init="onInit">
      <div class="carousel-cell">1</div>
      <div class="carousel-cell">2</div>
      <div class="carousel-cell">3</div>
      <div class="carousel-cell">4</div>
      <div class="carousel-cell">5</div>
    </flickity>
    <p>You are at Slide number {{ selectedIndex }}</p>
    <button @click="goToPrevious">Previous</button>
    <button @click="goToNext">Next</button>
  </div>
</template>

<script>
import Flickity from 'vue-flickity'

export default {
  components: {
    Flickity,
  },
  data() {
    return {
      flickityOptions: {
        initialIndex: 0,
        prevNextButtons: false,
        pageDots: false,
        wrapAround: true,
      },
      selectedIndex: 0,
    }
  },
  methods: {
    goToNext() {
      this.$refs.flickity.next()
    },
    goToPrevious() {
      this.$refs.flickity.previous()
    },
    onInit() {
      this.$refs.flickity.on('change', (event) => {
        this.selectedIndex = event
        console.log('current index', event)
      })
    },
  },
}
</script>

<style>
/* external css: flickity.css */

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.carousel-cell {
  width: 80%;
  min-height: 50vh;
  max-height: 80vh;
  object-fit: contain;
  margin-right: 10px;
}
</style>

确实没有其他事件，这太奇怪了，我冒昧地写了 previous/next 按钮，而不是手动保存一些东西，但你可以计算和偏移（没有找到直接 previous/next 的任何方法=20=]).

vue-flickity：如何将 selectedIndex 获取到 vue 数据中

vue-flickity: how to get selectedIndex into vue data

vue.js

nuxt.js

vue-flickity