Obtenir de la réactivité depuis la montre dans Vue.js

Question

Essayer de créer un composant dans Vue.js, qui affiche d'abord une image via une vignette, charger l'image complète en arrière-plan et, une fois chargé, afficher l'image complète.

La chose qui ne fonctionne pas, le composant ne réagit pas au changement de drapeau showThumb dans la section de surveillance. Qu'est-ce qui ne va pas?

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

Remarque: il y a une raison pour laquelle je le fais via 2 balises img - cet exemple est simplifié.

Answer 1

Votre rappel onload aura une portée différente de la fonction de surveillance environnante, vous ne pouvez donc pas définir votre propriété de données comme ceci. Changez-le à une fonction de flèche pour maintenir la portée:

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

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