vue-flickity如何获取selectedIndex存入Vue数据并实现滑动时自动更新

问题原因 #

代码核心问题出在mounted钩子中绑定change事件的回调函数上：你使用了普通匿名函数，导致函数内部的this指向的是Flickity组件实例，而非当前Vue组件实例，你赋值的this.selectedIndex并不是响应式数据里的变量，所以页面不会触发更新。

修复方案 #

将回调函数替换为箭头函数即可，箭头函数会继承外层作用域的this（也就是当前Vue组件实例），修改后的mounted代码如下：

mounted() {
  this.$refs.flickity.on('change', (event) => {
    this.selectedIndex = event
    console.log(this.selectedIndex)
  })
}

如果习惯用普通函数，也可以提前保存Vue实例的指向：

mounted() {
  const self = this
  this.$refs.flickity.on('change', function (event) {
    self.selectedIndex = event
    console.log(self.selectedIndex)
  })
}

修改完成后，用户滑动轮播、调用切换幻灯片的方法时，都会自动触发change事件同步更新selectedIndex，页面的展示也会同步响应，不需要额外手动点击按钮更新。

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