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

는 화상 포장지 내부의 범위는 0 불투명도를 가지며 .imageLoaded 클래스가 추가 될 때 그 1로 천이한다.

이것은 제대로 작동하지만 각 차량이 처음로드되었을 때만 유효합니다. 이미지가로드 될 때까지 기다렸다가 페이드 인합니다. 그 후에는 이미지가로드 될 때 이미지가 단순히 표시 될 때마다 imageLoaded 클래스가 재설정되지 않고/뷰를 벗어날 때 데이터가 재설정되지 않습니다.

브라우저 캐시를 지울 때 다시 작동하지만 각 차량보기마다 한 번 작동합니다.

Answer 1

이것은 아마도 v-if="vehicle"이 원인 일 수 있습니다. 차량 호출은 아마도 더 오래 걸릴 수 있으므로 클래스가 추가되거나 그와 관련된 타이밍 문제가 발생할 때까지 스팬이 표시되지 않습니다.