Vuejs reusing same HTML elements

Question

I am using this lazyload directive here:

https://itnext.io/lazy-loading-images-with-vue-js-directives-and-intersectionobserver-d0eb390cad9

      <li v-for="entry in entries">
          <router-link :to="'/d/' + entry.title">
            <img :title="entry.title" :data-url="entry.imageUrl" v-lazyload />
          </router-link>
      </li>

Problem is that whenever the route changes to another url, the first set of images that are displayed on the screen are the same images that were on the previous page!

It seems that vuejs is reusing HTML elements from another page to the next, but the lazyload directive is not aware of this. How can I prevent this to happen and force Vue to re-render elements ?

try adding :key="$route.fullPath" to your <router-view /> something like this <router-view :key="$route.fullPath"/> — SpiritOfDragon
– SpiritOfDragon, Commented Apr 4, 2020 at 18:25
@SpiritOfDragon You should make an answer for this post so it gets marked as complete. — Sølve
– Sølve, Commented Apr 4, 2020 at 21:09
thanks for the suggestion. I have posted an answer. @Alex if you could mark the answer as complete it would be helpful for others who are searching for answers. Thanks! — SpiritOfDragon
– SpiritOfDragon, Commented Apr 5, 2020 at 4:26

SpiritOfDragon · Accepted Answer · 2020-04-05 04:24:22Z

1

The problem is that the component is being reused as Vue thinks that only the data is being changed. To solve this issue you should tell Vue to re-render the component when the path changes. To do that you can give a unique key to <router-view />

something like this:

<router-view :key="$route.fullPath"/>

This can be useful when you want to:

Properly trigger lifecycle hooks of a component
Trigger transitions

answered Apr 5, 2020 at 4:24

SpiritOfDragon

1,4322 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vuejs reusing same HTML elements

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related