Vue-Router-Ansicht Caching/nicht Daten zurücksetzen

Question

Ich arbeite auf einer Auto-Verkaufswebsite und Verwendung von Vue-Router.

Ich habe eine Indexseite mit einer Liste aller Autos zum Verkauf, und wenn sie dann geklickt werden, verlinken sie auf die Einzelansicht dieses bestimmten Fahrzeugs.

Ich habe ein großes 'Header'-Bild auf der Single-View-Seite und habe es in einem Container mit einer festen Höhe, so dass beim Laden der Seite nicht in Seitenhöhe springt.

Wenn ich zu dieser einzelnen Ansicht gehe, führe ich einen API-Aufruf aus, um die Fahrzeugdaten zu erhalten und dann das Überschriftsbild einzublenden.

dies zu tun:

<div class="singleVehicle__mainImage"> 
    <span :style="styles" :class="{'imageLoaded' : mainImageLoaded }" v-if="vehicle"></span> 
</div> 

export default { 
    data() { 
     return { 
      vehicle: null, 
      styles: { 
       backgroundImage: null 
      }, 
      mainImageLoaded: null 
     } 
    }, 
    created() { 
     this.getVehicle().then(() => { 
      this.mainImageBackground(); 
     }); 
    }, 
    methods: { 
     mainImageBackground() { 
      var source = "IMAGE SOURCE URL"; 
      this.styles.backgroundImage = "url("+source+")"; 

      var $this = this; 
      var img = new Image(); 
      img.onload = function() { 
       $this.mainImageLoaded = true; 
      } 
      img.src = source; 
      if (img.complete) img.onload(); 
     } 
    } 
} 

standardmäßig die Spanne innerhalb des Bildes Wrapper hat eine 0 Opazität und dann wird das umge 1, wenn die .imageLoaded Klasse hinzugefügt wird.

Das funktioniert gut, aber nur das erste Mal jedes Fahrzeug geladen. Das Bild wartet, bis es geladen und dann eingeblendet wird. Jedes Mal danach erscheint das Bild einfach, wenn es geladen wird, fast so wie die imageLoaded-Klasse nicht zurückgesetzt wird/die Daten werden beim Verlassen der Ansicht nicht zurückgesetzt.

Beim Löschen des Browser-Caches funktioniert es wieder einmal für jede Fahrzeugansicht.

Answer 1

Dies ist wahrscheinlich aufgrund Ihrer v-if="vehicle". Der Fahrzeuganruf dauert möglicherweise länger und so wird die Zeitspanne erst angezeigt, nachdem die Klasse hinzugefügt wurde oder ein zeitlicher Fehler damit verbunden ist.