Vue.js 渲染组件后发生的Axios响应

我让父组件使用Axios发出Ajax请求，然后将响应分配给名为“

carousel

”的变量，然后传递给子组件

在“

created（）

”的子组件中，我将传递的道具“

carousel

”分配给一个名为“

slides

”的新变量

问题是，当我这样做时，返回的是未定义的，我的想法是Axios查询在这之前没有返回

是否有办法在道具传递之前延迟axios请求，并且子组件始终获得预期的响应

我的代码如下

家长

<template>
  <div class='product-container'>
    <home-carousel :carousel="carousel"></home-carousel>
    <profiler></profiler>
    <cta-sections :panels="panels"></cta-sections>
  </div>
</template>

<script>
  import api from '../api/Home'
  import CtaSections from '../components/CtaSections'
  import HomeCarousel from '../components/HomeCarousel'
  import Profiler from '../components/Profiler'
  export default {
    components: {
      CtaSections,
      HomeCarousel,
      Profiler,
    },
    data() {
      return {
        panels: [],
        slides: 'test',
        carouselPass: [],
        carousel: [],
      }
    },
    created() {
      axios.get(window.SETTINGS.API_BASE_PATH + 'pages/5')
        .then(response => {
          this.panels = response.data.acf.split_panels;
          this.carousel = response.data.acf.carousel;
          this.carousel.forEach(function (item, index) {
            if (index === 0) {
              item.active = true;
              item.opacity = 1;
            } else {
              item.active = false;
              item.opacity = 0;
            }
            item.id = index
          })
        })
    },
  }
</script>

从“../api/Home”导入api
从“../components/CtaSections”导入CtaSections
从“../components/HomeCarousel”导入HomeCarousel
从“../components/Profiler”导入探查器
导出默认值{
组成部分：{
各节，
家庭旋转木马，
剖析器，
},
数据（）{
返回{
面板：[]，
幻灯片：“测试”，
转盘通行证：[]，
传送带：[]，
}
},
创建（）{
获取（window.SETTINGS.API_BASE_PATH+'pages/5'）
。然后（响应=>{
this.panels=response.data.acf.split_panels；
this.carousel=response.data.acf.carousel；
this.carousel.forEach（函数（项、索引）{
如果（索引==0）{
item.active=true；
不透明度=1；
}否则{
item.active=false；
item.opacity=0；
}
item.id=索引
})
})
},
}

儿童

<template>
  <div class='slider'>
    <transition-group class='carouse carousel--fullHeight carousel--gradient' tag="div" name="fade">

      <div v-for="slide in slides" 
      class="carousel__slide" 
      v-bind:class="{ active: slide.active }" 
      :key="slide.id"
      :style="{ 'background-image': 'url(' + slide.image.url + ')' }"
      v-show="slide.active"
      >

        <div class="carousel__caption carousel__caption--centered">
          <h2 class="heading heading--white heading--uppercase heading--fixed">{{ slide.tagline }}</h2>
        </div>
      </div>
    </transition-group>

    <div class='carousel__controls carousel__controls--numbered carousel__controls--white carousel__controls--bottomRight carousel__controls--flex'>
      <div @click="next" class="in">
        <img src="/static/img/svg/next-arrow.svg" />
        <span v-if="carousel.length < 10">0</span>
        <span>{{ slideCount }}</span>
        <span>/</span>
        <span v-if="carousel.length < 10">0</span>
        <span>{{ carousel.length }}</span>
      </div>
    </div>

  </div>
</template>

<script>
import bus from '../bus'
  import Booking from './Booking'
  export default {
    name: 'HomeCarousel',
    props: ['carousel'],
    data() {
      return {
        slideCount: 1,
        slides: [],
        /*
        slides: [{
            image: this.themepath + 'home-banner.jpg',
            active: true,
            captionText: 'A PLACE AS UNIQUE AS YOU ARE',
            buttonText: 'book now',
            buttonUrl: '#',
            opacity: 1,
            id: 1
          },
          {
            image: this.themepath + 'home-banner2.jpg',
            active: false,
            captionText: 'A PLACE AS UNIQUE AS YOU ARE',
            buttonText: 'book now',
            buttonUrl: '#',
            opacity: 0,
            id: 2
          }
        ]
        */
      }
    },

    methods: {
      showBooking: function() {
        this.$store.state.showBooking = true;
      },
      next() {
        const first = this.slides.shift();
        this.slides = this.slides.concat(first)
        first.active = false;
        this.slides[0].active = true;
        if (this.slideCount === this.slides.length) {
          this.slideCount = 1;
        } else {
          this.slideCount++;
        }
      },
      previous() {
        const last = this.slides.pop()
        this.slides = [last].concat(this.slides)

        // Loop through Array and set all active values to false;
        var slideLength = this.slides.length;
        for (var slide = 0; slide < slideLength; slide++) {
          this.slides[slide].active = false;
        }
        // Apply active class to first slide
        this.slides[0].active = true;
        this.slideCount--;
      },
      loopInterval() {
        let self = this;
        setInterval(function () {
          self.next()
        }, 8000);
      }
    },
    created() {
      this.slides = this.carousel;
    }
  }

</script>

{{slide.tagline}
0
{{slideCount}}
/
0
{{carousel.length}
从“../bus”导入总线
从“./Booking”导入预订
导出默认值{
名称：'家庭旋转木马'，
道具：[“旋转木马”]，
数据（）{
返回{
幻灯片计数：1，
幻灯片：[]，
/*
幻灯片：[{
图片：this.themepath+'home banner.jpg'，
主动：对，
captionText:“一个和你一样独特的地方”，
buttonText:“立即预订”，
buttonUrl:“#”，
不透明度：1，
身份证号码：1
},
{
图片：this.themepath+'home-banner2.jpg'，
活动：错误，
captionText:“一个和你一样独特的地方”，
buttonText:“立即预订”，
buttonUrl:“#”，
不透明度：0，
身份证号码：2
}
]
*/
}
},
方法：{
showBooking:function（）{
此。$store.state.showBooking=true；
},
下一个（）{
const first=this.slides.shift（）；
this.slides=this.slides.concat（第一个）
first.active=false；
this.slides[0]。active=true；
if（this.slideCount==this.slides.length）{
this.slideCount=1；
}否则{
这个.slideCount++；
}
},
前（）{
const last=this.slides.pop（）
this.slides=[last].concat（this.slides）
//循环遍历数组并将所有活动值设置为false；
var slideLength=this.slides.length；
对于（var slide=0；slide

当道具发生变化时，即异步调用完成时，您只需观看道具并设置此幻灯片即可：

watch:{
  carousel(value) {
    this.slides = value
  }
}

---

这里有一个JSIDLE:

你可以只看这个道具，当它改变时，即异步调用完成时，设置这个幻灯片：

watch:{
  carousel(value) {
    this.slides = value
  }
}

---

这里有一个JSFiddle:

你能说得更具体一点吗。我在父母或孩子身上看什么？你有没有一个例子。你把它加到你的孩子身上，看：看一看。但还是有同样的问题。旋转木马还没有定义。你能更具体一点吗？对不起。我在父母或孩子身上看什么？你有没有一个例子。你把它加到你的孩子身上，看：看一看。但还是有同样的问题。转盘仍然没有定义。