javascript - v-for 循环不适用于数组项

Question

我有一个v-for循环，应该循环图像 url 数组以将它们分配给srcswiper 实例的属性。我面临的问题是数据被打印为用逗号分隔的单个字符串，并且<img>不会为数组中的每个图像 url 创建标签。有解决办法吗？问题发生在 vue 组件内部。

DOM Markup

<!-- swiper slider / this is part of a component -->
    <div class="row m-0" v-for="page in pageData">
      <div class="col-sm-12 col-md-12 col-lg-12 p-5 mt-5 mb-5" v-if="page.embedded.gallery_images">
        <div class="swiper-container page-carousel">
          <div class="swiper-wrapper">
            <img v-for="img in feedImg" class="swiper-slide" :src="img" />
          </div>
        </div>
      </div>
    </div>
// Vue component

Vue.component('theme-page',{
  template: '#page-tpl',
  data(){
    return{
      pageData: [],
      feedImg: []
    }
  },
  watch: {
    $route( to, from ){
      //console.log('c instance:'+ to, from);
      this.getPage();
    }
  },
  mounted: function(){
    this.getPage();
    this.initSwiper();
  },
  methods: {
    getPage: function(){
      console.log(this.$route.params.slug);
      axios.get(theme.pages_rest_url+'?slug='+ this.$route.params.slug)
        .then( (response) => {
        console.log(response.data);
        response.data.forEach( (item, i) => {
          this.pageData = [item];
          this.feedImg = [item.embedded.gallery_images];
        });
        console.log(this.feedImg);
      });
    },
    initSwiper: function(){
      const feedSwiper = new Swiper('.page-carousel', {  
        slidesPerView: 4,
        //spaceBetween: 80,
        slidesPerGroup: 4,
        virtual: {
          cache: true,
          slides: this.feedImg,
          renderExternal: function(feedImg){
            this.feedImg = feedImg;
          }
        },
        //loop: true,
        autoplay: {
          delay: 5000
         },
        //loopFillGroupWithBlank: true,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      });            
    }
  }
});

标签： javascriptvue.js