0

i install vue infinite loading for my chat app (backend laravel), everything is work now but if data respone from server contain something like a image or file, it seem to be load again and again like my image highlight bellow, correct the pic is load just one. anyone can help with this issue? thanks!

infiniteHandler($state) {
              setTimeout(() => {
                 axios.get('/messages', {
                        params: {
                            page: this.page,
                            room_id:this.user[0].shop_id === 0?this.user[0].id : this.user[0].shop_id
                        },
                    }).then(({ data }) => {


                        if (data.data.length) {
                            this.page += 1;
                            this.messages.unshift(...data.data.reverse());

                            $state.loaded();
                        } else {
                            $state.complete();
                        }
                    });
                }, 200);
            },
    <div class="card-body" style="overflow: auto; height: 60vh; position: relative;" ref="card" @scroll="onScroll" >
  <infinite-loading direction="top" @infinite="infiniteHandler">    </infinite-loading>
  <div class="media"  v-for="(message, $index ) in messages" :key="$index">

  </div>
</div>
enter image description here
Duc Pham
  • 19
  • 7

2 Answers2

0

Try to set a different :key in your v-for. This is important for Vue to know which element is already rendered, and which should be re-rendered.

I don't know what your data looks like but you should have a uniq id for every items, or a name...

Using the index on dynamic lists will likely cause unecessary re-renders.

<div
  class="media"
  v-for="message in messages"
  :key="message.id"
>
  ...
</div>
Kapcash
  • 6,377
  • 2
  • 18
  • 40
  • thank you, i also do this the image load one time but the scroll bar work incorect, it scroll to some position with no caculate position like normal of infinite loading – Duc Pham Apr 04 '22 at 07:49
  • may be vue infinite loading using :key="index" to caculate the scroll bar position when load more data, but it also caught my problem – Duc Pham Apr 04 '22 at 07:56
  • I feel like this has nothing to deal with the `vue-infinite-loading` component. I think it's just an `Intersection observer` with a loading spin. Try to replace it by a simple button that fetch new data and see if it fixes your problem? – Kapcash Apr 04 '22 at 08:27
0

i remove vue-infinite-loading and end up with this solution Preserve scroll position on DOM update in vue.js . everything work fine now!

Duc Pham
  • 19
  • 7