how to use vue-lazyload with sort or filter function

[pdt590]

Hello I am using vue-lazyload for my shopping card project. vue-lazyload is used to display preview image in each item card. It runs well when every item cards are loaded at the first time. However, when i use my own sort or filter function to re-display the cards following orders such as newest oldest, the image in each card does not reload again to display correctly.

Do you have any solution for this? Thank you so much for your help.

[eytanchen]

having the same problem here

[huangjinqiang]

273

https://github.com/hilongjw/vue-lazyload/pull/301

[RaphaelDDL]

I have same issue, even after adding :key to the img as pointed on #273. The difference for me is that I'm not using v-lazy on the image, but using v-lazy-container.

I have the following:

    <div v-lazy-container="{ selector: '.hero-list-card-image, .artifact-list-card-image' }">
        <ListItemComponent :hero="hero" :id="hero.fileId" :key="hero.fileId" v-for="hero in displayHeroes" />

Inside ListItemComponent, I have the img:

           <img
                class="hero-list-card-image"
                :data-error="imageUrls.missing"
                :data-src="imageUrls.small"
                :key="`${hero.name}_small`"
            />

Which follows the suggested 273 approach by adding :key.

Nevertheless, whenever we do a filter on the computed property displayHeroes, just the first (sometimes the second) images show up.

The src was never set on the img:

I tried to trigger a scroll to see if would make any change but no luck :P

const e = document.createEvent('Event');
e.initEvent('scroll', true, true);
window.dispatchEvent(e);

Any ideas? Should I create a new issue since I'm not using v-lazy but v-lazy-container?

btw, I changed the code to have v-lazy on the ListItemComponent and passing the object with src and error on the v-lazy and it worked. I guess v-lazy-container needs to have #301 ported to it

[ghost]

I got a solution. You need to add :key. Probably, it will work.

<img v-lazy="data.src" :key="data.src"/>

[vonlyinno]

this option works! observer: true

[tylik1]

:key didn't work for me, while observer:true did. But scrolling became a bit slower