0

I have around a hundred different components representing a specific record. These components are being displayed on a timeline with "load more functionality". What I have right now looks like this:

<template>
  <div>
    <template v-for="record in records">
      <record-component-1 v-if="record.type === 'rec1'"></record-component-1>
      <record-component-2 v-if="record.type === 'rec2'"></record-component-2>
      <record-component-3 v-if="record.type === 'rec3'"></record-component-3>
      <!-- so on -->
      <record-component-100 v-if="record.type === 'rec100'"></record-component-100>
    </template>
  </div>
</template>

As the pagination goes, the memory consumption is also going up very fast. Up to 2GB until the browser crashes.

I tried to do some research but I can't find a solution that's similar from my design.

Perhaps there are solutions that would cater this kind of problem.

Any input would be much appreciated. Thanks.

jofftiquez
  • 7,548
  • 10
  • 67
  • 121

3 Answers3

1

It seems to me that the problem is that you are evaluating 100 v-if's for each record. Why not use dynamic components to render only the component you need depending on the record.type?

tony19
  • 125,647
  • 18
  • 229
  • 307
Eder Díaz
  • 1,991
  • 1
  • 13
  • 10
0

don't show every record that comes back from database just request like 10 a time and dont save every of those records on local memory only save those that the current user is on like if user is on page 10 only save records for page 10 and if user navigate to page 6 request records for page 6 and set them in place of page 10 records asumming u have only 1 pagination for all those records

Dr. Shrimp Puerto Rico
  • 51
  • 4
  • 1. Yes, I'm doing that I only load the first 10 at first. 2. I have to append new page data to the previous page to achieve the scrolling feature. I guess the main problem that I want to address here is not the pagination, but the rendering of components in the loop. – jofftiquez Oct 12 '19 at 10:44
  • if this is the case then all you have to do is send props to your component and in your component when you receive props you have to push the props in you data array in you local component and it will do the work for you – Dr. Shrimp Puerto Rico Oct 12 '19 at 12:03
0

main component 

<childComponent data="this.updatedData"}/>

childComponent.vue

new Vue({
  el: '#app',
  data: {
    localData: []
  },
  components: {
    'childComponent' : {
      template: `<p v-for="item in this.localData">{{ item }}</p>`,
      props: ['data'],
      watch: { 
        data: function(newVal, oldVal) { // watch it
           this.localData.push(newVal)
          console.log('Prop changed: ', newVal, ' | was: ', oldVal)
        }
      }
    }
  }
});

VueJs 2.0 - how to listen for `props` changes

Dr. Shrimp Puerto Rico
  • 51
  • 4