empêchant Vue d'éléments de DOM-réutilisant aggresively

Question

Condider le fragment suivant:

 <template v-if="tryIsMobile" > 
      <div class='device device-mobile-portrait' :class="deviceClass"> 
      <div class="device-scroller-container"> 
       <div class='device-scroller'> 
       <img id='tryit-img-mobile' :src="srcUrlMobile" v-on:load="onImgLoad" v-on:error="onImgError"/> 
       </div> 
      </div> 
      </div> 
     </template> 

     <template v-else> 
      <div class='device device-tablet-landscape' :class="deviceClass" > 
      <div class="device-scroller-container"> 
       <div class='device-scroller'> 
       <img id='tryit-img-tablet' :src="srcUrlTablet" v-on:load="onImgLoad" v-on:error="onImgError"/> 
       </div> 
      </div> 
      </div> 
     </template> 

Ce code rend conditionnellement une des deux images. Certaines actions de l'utilisateur entraînent le basculement de l'image affichée réelle. Ce que je vois est la suivante: Lorsque basculer de dire, tryit-img-mobile à tryit-img-tablet, l'image chargée dans le cadre de tryit-img-mobile sera affichée avec différentes dimensions instantanément. Cependant, pendant le temps que l'image charge sa nouvelle source :src="srcUrlTablet", l'image avec src :src="srcUrlMobile" s'affiche toujours.

Cela est probablement dû au fait que Vue utilise le même img-tag pour les deux modèles. Comment puis-je empêcher Vue de faire cela, et utiliser à la place des balises img séparées?

Answer 1

Dans les cas de ce type, Vue utilise un attribut spécial key qui lui indique de ne pas réutiliser le même élément. Donnez à chaque élément de cet attribut avec une valeur unique, et Vue ne réutilisera plus le même élément:

<div v-if="tryIsMobile" 
    class="device device-mobile-portrait" 
    :class="deviceClass" 
    key="mobile" 
> 
    ... 
</div> 
<div v-else 
    class="device device-tablet-landscape" 
    :class="deviceClass" 
    key="tablet" 
> 
    ... 
</div>