Vue verhindert aggresively Wiederverwendung dom-Elemente

Question

Condider folgenden Ausschnitt:

 <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> 

Dieser Code macht bedingt eine der beiden Bilder. Einige Benutzeraktionen führen dazu, dass das tatsächlich angezeigte Bild umgeschaltet wird.

Was ich sehe, ist Folgendes: Wenn Sie von sagen, tryit-img-mobile zu tryit-img-tablet, wird das Bild geladen als Teil tryit-img-mobile wird sofort mit anderen Dimensionen angezeigt. Während der Zeit, in der das Bild geladen wird, wird jedoch die neue Quelle :src="srcUrlTablet" angezeigt. Das Bild mit src :src="srcUrlMobile" wird weiterhin angezeigt.

Dies liegt wahrscheinlich daran, dass Vue den gleichen img-Tag für beide Vorlagen verwendet. Wie kann ich Vue davon abhalten und stattdessen separate img-tags verwenden?

Answer 1

In solchen Fällen verwendet Vue ein spezielles key-Attribut, das besagt, dass das gleiche Element nicht erneut verwendet werden soll. Geben Sie jedem Element dieses Attribut mit einem eindeutigen Wert, und Vue wird nicht mehr das gleiche Element wiederverwenden:

<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>