CODEWITHSUNDEEP
javascripthtmlvue.js
Alex
Alex

Reputation: 67248

Vuejs reusing same HTML elements

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 ?

Upvotes: 1

Views: 311

Answers (1)

SpiritOfDragon
SpiritOfDragon

Reputation: 1432

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

Upvotes: 1

Related Questions