Append dynamic data to vue js v-for without rerender the entire list?

Question

i have the following template in vue 2 (simplified version):

<template>
 <div>
  <div v-for="(data, index) in allData" :key="index">
     <app-collection :data="data" :index="index"></app-collection>
  </div>
 </div>
</template>

My data are as follow:

data: function(){
    return {
      allData: []
    }
  }

Then I have a loadmore button when I click I call a method that fetch data from an API and then add them to allData in a forEach loop like this:

this.allNFT.push({name: "name 1", age: 25"})

My problem is that everytime I add new data, it rerender the entire list instead of just adding at the end.

Is there a way to avoid that and just append new data?

Here is a more global overview of my code in simplified version (i dont have the API online yet):

<template>
  <div>
    <div id="collectionList" class="form-group" v-else>
      <div class="row">
        <div class="col-lg-4" v-for="(data, index) in allData" :key="data.assetId+'_'+index">
          <app-collection :data="data" :index="index"></app-collection>
        </div>
      </div>
      <button class="btn btn-primary" v-if="loadMore" @click="getallData()">Load more</button>
      <div v-else class="text-center">{{ allData.length ? 'All data loaded' : 'No data found' }}</div>
    </div>
  </div>
</template>
<script>

import collection from '@/components/content/collection/collection.vue'


export default {
  data: function(){
    return {
      loadMore: true,
      allData: [],
      perpage: 25,
      currentPage: 1
    }
  },
  components: {
    'app-collection': collection
  },
  created: function(){
    this.init()
  },
  methods: {
    init: async function(){
      await this.getallData()
    },
    getallData: async function(){
      let filtered = {
          "page": this.currentPage,
          "perpage": this.perpage,
        }
      try{
        let getData = await fetch(
          "http://localhost:3200/secondary/paginate-filter",
          {
            method: 'post',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(
              filtered
            )
          }
        )
        getData = await getData.json()
        if(getData.length){
          getData.forEach((elm) => {
            this.allData.push({name: elm.name, age: elm.age})
          })
        }
        this.currentPage++
        if(getData.length < this.perpage){
          this.loadMore = false
        }
      }catch(e){
        console.log(e)
      }
    },
  }
};
</script>

A minimal reproducible code would help us provide you with an answer. — skr
– skr, Commented Dec 22, 2021 at 9:07

Farhod Nematov · Accepted Answer · 2021-12-22 09:32:26Z

3

If from api you receive only next page you can use


this.allData.push(...getData);

//If you want to change response data
this.allData.push(...getData.map(d => ({name: d.name, age: d.age})))

If your server returns with previous page data you have to re assign data

this.allData = getData.map(d => ({name: d.name, age: d.age}))

edited Dec 22, 2021 at 9:32

answered Dec 22, 2021 at 9:16

Farhod Nematov

3852 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Christophe Over a year ago

Server return only new data then i append them to allData but it rerender everything while i only would like it to add at the end.

Farhod Nematov Over a year ago

That's way, first method will help you

Farhod Nematov Over a year ago

Use this.allData.push(...getData)

Christophe Over a year ago

getData dont return the structure i want that's why i go through a forEach first to push an custom object.

Christophe Over a year ago

I just tried but i get the same issue with it, I load first 25 then when i click load more, the entire list rerender instead of just adding 25 new at the end.

|

Collectives™ on Stack Overflow

Append dynamic data to vue js v-for without rerender the entire list?

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related