Vue.js의 시계에서 반응성을 얻으려면

Question

처음에는 미리보기 이미지를 통해 이미지를 보여주고 전체 이미지를 백그라운드로로드하고로드 할 때 전체 이미지를 표시하는 Vue.js에서 구성 요소를 만들려고합니다.

시계 부분에서 showThumb 플래그의 변경에 작동하지 않는 구성 요소가 반응하지 않습니다. 뭐가 잘못 되었 니?

Vue.component('page-image', 
{ 
    props: ['data'], 
    template: 
    '<img v-if="showThumb == true" v-bind:src="thumbSrc"></img>'+ 
    '<img v-else v-bind:src="fullSrc"></img>', 
    data: function() 
    { 
     return { thumbSrc: '', fullSrc: '', showThumb: true }; 
    }, 
    watch: 
    { 
     data: function() 
     { 
      this.thumbSrc = data.thumbImg.url; 
      this.fullSrc  = data.fullImg.url; 

      this.showThumb = true; 

      var imgElement = new Image(); 
      imgElement.src = this.fullSrc; 
      imgElement.onload = (function() 
      { 
      this.showThumb = false; // <<-- this part is broken 
      }); 
     } 
    } 
}); 

참고 : 2 개의 img 태그를 사용하는 이유가 있습니다.이 예는 간단합니다.

Answer 1

귀하의 onload 콜백은 주변의 시계 기능과 다른 범위를 가지므로 이와 같은 데이터 속성을 설정할 수 없습니다. 범위를 유지하기 위해 화살표 함수에 변경 :

imgElement.onload =() => 
{ 
    this.showThumb = false; 
}; 

이 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

내 옆에