vue infinite load duplicate content issue

Question

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>

Answer 1

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>

Answer 2

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