Question

を再利用からVueのを防ぐ：

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

このコードは、条件付きで2枚の画像の一方をレンダリングします。ユーザの操作によっては、実際に表示されるイメージがトグルされることになります。 からtryit-img-tabletに切り替えると、tryit-img-mobileの一部として読み込まれた画像は、すぐに異なる次元で表示されます。ただし、画像が新しいソース:src="srcUrlTablet"をロードしている間は、src :src="srcUrlMobile"の画像が表示されます。

これはおそらく、両方のテンプレートに同じimg-tagを使用しているVueによるものです。 Vueにこれをさせないようにするには、別のimg-tagsを使用するのですか？

Answer 1

このような場合、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>