[Vuejs]-Lookup from a Vuex observed property containing many rows is very slow

by

0👍

I think the main problem here is that in you are accessing the rowsPrepared from the store for every cell in the grid. So, what happens is that whenever there is a change anywhere in the rowsPrepared array the computed property gets triggered for each and every cell even if that cell’s value hasn’t been updated. You can verify this by putting a console in the computed property and I think you will see that console printed for every cell which makes scrolling heavy.

Solution :- You need to pass the rowsPrepared[this.rowNo][‘lastName’] as a prop to your cell component instead of accessing it in every cell.

Something like :-

<div v-for="(item, index) in rowsPrepared">
 <CellComponent 
     v-bind:value=rowsPrepared[index]['lastName']
     v-bind:colDef = "colDef"
     v-bind:rowNoVi= "rowNoVi">
 </CellComponent> 
</div>
👤fullmetal

Leave a comment