Vuejs 在敏捷轮播问题中从 JSON 动态填充照片

如何解决Vuejs 在敏捷轮播问题中从 JSON 动态填充照片

我一直在尝试使用 v-for 动态填充照片 Agile carousel，我可以在我的 carousel 中看到照片，但我无法滚动它们并且出现错误：

v-on 处理程序中的错误：“TypeError: _vm.$refs.thumbnails.goTo 不是函数”

这是我的代码：

<template>
  <div>
    <div v-for="slide in slider" :key="slide.id">

    <agile class="main" ref="main" :options="options1" :as-nav-for="asNavFor1">
      <div class="slide" v-for="(photo,index) in slide.gallery" :key="index" :class="`slide--${index}`"><img :src="photo"/></div>
    </agile>
    <agile class="thumbnails" ref="thumbnails" :options="options2" :as-nav-for="asNavFor2">
      <div class="slide slide--thumbniail" v-for="(photo,index) in slide.gallery" :key="index" :class="`slide--${index}`" @click="$refs.thumbnails.goTo(index)"><img :src="photo"/></div>
      <template slot="prevButton"><i class="fas fa-chevron-left"></i></template>
      <template slot="nextButton"><i class="fas fa-chevron-right"></i></template>
    </agile>
    </div>
  </div>
</template>
<script>
import { VueAgile } from 'vue-agile'
import villaDetails from '../data/villaDetails.json'
export default{
  components: {
    agile: VueAgile
  },data(){
    return{
      asNavFor1: [],asNavFor2: [],options1: {
        dots: false,fade: true,navButtons:false,},slider:villaDetails,}

  },mounted () {
    this.asNavFor1.push(this.$refs.thumbnails)
    this.asNavFor2.push(this.$refs.main)
  }
}
</script>

我的 Json 文件如下所示：

[
 {
  "gallery":[

      "https://i.imgur.com/FJ2dKaq.jpg","https://i.imgur.com/rtTu2jP.jpg","https://i.imgur.com/qmLUTIc.jpg","https://i.imgur.com/Chl6B6g.jpg"
   ]
 }
]