2016-12-11 5 views
0

Die VueJS-Komponente wird nach der Navigation nicht zwischengespeichert oder zumindest wieder angehängt. Beim Aktualisieren oder Starten wird alles gut angehängt und gerendert, aber nach dem Navigieren zu einer anderen Seite und dann zurück. Die erste Komponente - Karussell - Komponente in meinem Fall wird nicht gerendert, aber der API-Aufruf erfolgt.Vue JS Komponente erneut anhängen oder Cache

<template> 
<div class="rel"> 
    <div id="homeCarousel" class="owl-carousel owl-slider"> 
     <div class="item" v-for="product in featured"> 
      <div class="bg-holder top-area-half" > 
       <div class="bg-mask-lighten"></div> 
       <img class="bg-img" v-bind:src="product.feature_image_url"> 
       <div class="hero-caption"> 
        <div class="container"> 
         <h3 class="hero-title">{{product.feature_title}}</h3> 
         <p class="hero-subtitle">{{product.feature_subtitle}}</p> 
         <a class="btn btn-white btn-ghost btn-lg hero-btn" href="#">Shop now</a> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div id="hero-slider-nav" class="hero-slider-nav"> 
     <div class="container"> 
      <div class="pull-right"></div> 
     </div> 
    </div> 
</div> 
</template> 
<style> 

</style> 
<script> 
export default{ 
    data(){ 
     return{ 
      featured:[] 
     } 
    }, 
    ready(){ 

    }, 
    mounted(){ 
     this.getFeaturedProducts(); 
    }, 
    components:{ 

    }, 
    methods: { 
     getFeaturedProducts: function() { 
      Vue.http.get('/api/product/filter/featured=1').then(
       (response) => { 
        this.featured = response.body; 
       } 
      ) 
     } 
    } 

} 
</script> 

`

<template> 
    <div class="global-wrapper clearfix "> 
     <keep-alive> 
      <Carousel></Carousel> 
     </keep-alive> 
//The rest of the code which is just importing the Component 
+0

Haben Sie es ohne die 'keep-alive'-Option versucht? Wenn es einmal gerendert wird und nicht wieder gerendert wird, dann ist es höchstwahrscheinlich ein Problem mit 'keep-alive' – Mani

+0

Ich habe versucht, ohne es zu ärgern, es wird nicht gerendert, wenn man zurückgeht – user3533087

+0

Dann müssen Sie die Werte von' this.featured' überprüfen Verwenden Sie [vue-cli] (https://github.com/vuejs/vue-cli), um sicherzustellen, dass das von Ihnen erwartete Produkt-Array vorhanden ist. Wenn die Array-Länge Null ist, wird nichts angezeigt, obwohl die Komponente gerendert wird. – Mani

Antwort

0

fand ich heraus, was ich falsch mache. Ich hatte eine separate JS/JQuery-Datei und auf dem Dokument bereit initiierte ich ein Eulenkarussell von ID #('homeCarousel').owlCarousel({}). Was funktionierte, war, da ich bereits Eulenkarussell -> auf dem berittenen Lifecycle Callback Bootstrapped hatte, zielte ich jetzt auf das Element und machte es ein Eulenkarussell.