防止從Vue公司重用aggresively DOM元素

Condider下面的代碼片斷：防止從Vue公司重用aggresively DOM元素

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

此代碼有條件地使所述兩個圖像中的一個。某些用戶操作會導致實際顯示的圖像被切換。

我看到的是以下內容：當從說，tryit-img-mobile切換到tryit-img-tablet時，作爲tryit-img-mobile的一部分加載的圖像將立即以不同的尺寸顯示。但是，在圖像加載期間，它是新來源:src="srcUrlTablet"，仍然顯示帶有src :src="srcUrlMobile"的圖像。

這可能是由於Vue對兩個模板使用相同的img-tag。我如何防止Vue做到這一點，而是使用單獨的img標籤？

來源

2017-10-15 Geert-Jan

添加'key'屬性對你'device'元素，具有一些獨特的價值，比如'鍵=「桌面「'和'key =」mobile「'。這將告訴Vue不要重複使用這些元素。 –

@JosephSilber：woeha，似乎已經解決了它！如果你喜歡把它記下來，我很樂意接受。 –

在這種情況下，Vue使用特殊的key屬性，告訴它不要重複使用相同的元素。給每個元件都具有獨特的價值這個屬性，而Vue公司將不再重複使用相同的元素：

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

來源

2017-10-15 18:32:44

回答

相關問題