<\/script>')
All geek questions in one place

Prevent Vue from aggressively reusing dom elements

Divide the following snippet:

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

This code conditionally displays one of two images. Some user actions result in switching the displayed image.

I see the following: when switching from tryit-img-mobile to tryit-img-tablet image uploaded as part of tryit-img-mobile will be displayed with various measurements instantly. However, during the time the image loads a new source :src="srcUrlTablet" , the image with src :src="srcUrlMobile" is still displayed.

This is probably due to the fact that Vue uses the same img tag for both templates. How can I prevent Vue from doing this and use separate img tags instead?

+5
source share
1 answer

In such cases, Vue uses the special key attribute, which tells it not to repeat the use of the same element. Give each element this attribute a unique value, and Vue will no longer reuse the same element:

 <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>
+3
source

Source: https://habr.com/ru/post/1272645/

More articles:


All Articles