[Vuejs]-Vue's smart loading of elements delays undisplayed

by

0👍

✅

thank’s to Michal Levý‘s comment I went looking through dev console to see what is actually happenig.

I edited the question to add the first line to the block of code with this important info

<div id="lightbox"
    class="modal"
    v-if="photo !== null"
    v-show="showModal"
    @click.self="closeModal"
>

while developing my gallery I only had v-show="showModal condition on this div, but later as I added body, it would throw error, because i would try to access attributes of null (photo.id for example), so i added v-if="photo !== null" which works differently from v-show. v-show sets display: none; and v-if does not render the element at all, so of course the DOM does not load the image.

therefore, in my axios then block i added a line after setting the array of photos

this.photos = response.data
this.photo = this.photos[0]

to set selected photo to the first array element, even if it is still not displayed.
this line puts modal in the DOM and images load right away.

Leave a comment