Axios Antwort passiert, nachdem die Komponente gerendert wurde

Question

Ich habe eine Elternkomponente, die eine Ajax-Anfrage mit Axios macht. Die Antwort wird dann einer Variable mit dem Namen 'carousel' zugewiesen und dann an die Kindkomponente weitergegeben.

Im Kind-Komponente auf ‚created()‘ Ich bin das übergebene prop ‚carousel‘ zu einer neuen Variablen zugewiesen namens ‚slides‘

Problem, wenn ich dies tun, kehrt undefiniert und mein Denken ist die Axios Abfrage hasn Bin nicht zurückgekehrt, bevor das passiert.

Gibt es eine Möglichkeit, die Axios-Anforderung zu verzögern, bevor die Prop-Komponente übergeben wird und die untergeordnete Komponente immer die erwartete Antwort erhält.

Mein Code ist unten.

Eltern

<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> 

Kind

<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> 

Answer 1

Sie die Stütze nur beobachten und setzen this.slides wenn sie sich ändert, dh wenn der Asynchron-Anruf beendet hat:

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

Hier ist ein JSFiddle: https://jsfiddle.net/nwLh0d4w/