vue-routerビューキャッシング/データリセットなし

Question

車の販売サイトでvue-routerを使用しています。

私は、販売するすべての車のリストを持つインデックスページを持っており、クリックするとその特定の車両の単一のビューにリンクします。

単一のビューページに大きな「ヘッダー」イメージがあり、ページが読み込まれたときにページの高さにジャンプしないように高さが固定されたコンテナ内にあります。

この単一のビューに進むと、私はAPI呼び出しを呼び出して車両データを取得し、見出し画像をフェードインします。これを行うために

：デフォルトでは

<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(); 
     } 
    } 
} 

を、画像ラッパー内のスパンは.imageLoadedクラスが追加されたときに1に移行され、その後0不透明度としています。

これは問題なく動作しますが、各車両が初めて搭載されたときにのみ有効です。イメージはロードされるまで待ってからフェードインされます。それ以降はイメージが読み込まれるとイメージがポップアップします。imageLoadedクラスがリセットされていない/ビューを離れるときにデータがリセットされていません。

ブラウザキャッシュをクリアすると、再び動作しますが、車両ビューごとに1回動作します。

Answer 1

これはおそらくあなたのv-if="vehicle"が原因です。車両の呼び出しに時間がかかる可能性があるため、クラスが追加されるか、それに関連するタイミングの問題が発生するまで、スパンは表示されません。