Infinite Scroll with images are reloading

  • Hi, I’m using vuex, and I have a list of post with an infinite scroll component. Problem is that every time vuex is updated it reloads all images in the list. How I can avoid to reload all images each time onLoad() runs?

  • I think that you must provide more code for anyone to be helpful… Are you perhaps replacing the entire array in the vuex store?

  • Sure, I have this code below.
    export function getPosts ({commit, state}) {
    var params, posts

    commit(‘startLoadingPosts’, true)

     params = state.get.params
    posts = {}
    params = encodeURIComponent(JSON.stringify(params))
        .then( response =>{
          posts =
          commit('updatePosts', posts)
        .catch( err =>{
          commit('setResponse', err )
          commit('startLoadingPosts', false)


    export function updatePosts (state, obj) {

    state.get.snapshot=  obj.snapshot
    state.get.last = obj.posts;

    //console.log(‘new posts’, obj)

     state.get.posts =  {...state.get.posts, ...obj.posts} 


    the posts are an object and to join them I use the spread operator, it may be this? because I’m creating a new object?

    Thanks for the reply!


    I tried to do it with a “for in” to avoid to change the posts already created, but still happening the same

    for (const key in newPosts) {
    if (newPosts.hasOwnProperty(key)) {
    const newPost = newPosts[key]
    state.get.posts[key] = newPost

    I have my home page with :

    <item-list :passedPosts=“posts”>

    posts is a computed property that gets from the store:

    //console.log('store ', this.$store)
    return this.$store.state.http.get.posts

    then a list component getting the posts from another computed passed from the properties:

    <template v-else-if="$sal.objLen(posts)">
    <q-infinite-scroll @load=“onLoad” :offset=“250” class=“fit row wrap justify-start content-start text-center”>

          <single-item v-for="(post, index) in posts" :key="index" :passedItem="post"  class="q-mb-md"></single-item>
          <template v-slot:loading  >
              <div class="row justify-center q-my-md ">
          <div class="q-pa-lg flex flex-center full-width">
            <q-pagination v-if="0 == 1" :direction-links="true" :max="5" :value="" @input="changePage($event, 'page')">
             <template v-if="$sal.objLen($store.state.http.get.last) == 0 ">
                No more posts Found

    return this.passedPosts

    and finally the the single item component that gets the post from the v-for using the id of the post as a key (it’s a string id from firebase). And a computed property item to get data from property “itemPassed” from parent list component

    computed :{

        var newItem = this.passedItem
          var user = this.$store.state.auth.currentUser
          var user_id = user.uid
        if(typeof newItem.likes != 'undefined'  && typeof newItem.likes[user_id] != 'undefined'){
         //console.log('user uid', user_id )
         //console.log(newItem.likes[user_id] )
          newItem.userLikes = newItem.likes[user_id]
        var item = {
        item.rating = item.rating / 2
        return item
                return this.$store.state.http.get.loadingPosts

  • @MiquelCapo

    lots of code snippets all over the place does not make it easier to understand.

    So did you fix or are you still asking for help?

  • @dobbel No, I couldn’t solve it.

    What makes not to reload all the images? maybe somebody has an answer to this and I can solve it faster… Or any body knows some tutorial?

    Thanks again

  • @MiquelCapo

    Often the best way to get your problem solved here is by making a ( extend a quasar example for easy setup) that demonstrates the problem.

Log in to reply