Level 51
Define 'large' datasets.
Nov 25, 2023
3
Level 1
V-model and v-for becomes slow when dealing with large datasets.
Please help : (if could, please answer with example of code :D)
"The v-for directive becomes slow when dealing with large datasets. Note: My data is local, not from an API. I have only one button that, when clicked, adds new data to the 'items' array. Within the loop, there are five inputs that work with v-model. After clicking the 'add item' button more than 30 times, the pre-rendering process becomes noticeably slow. Please help me. Here is my example code below:"
<tr v-for="(item,index) in items" :key="index">
<td> .... </td>
<td>
<input type="number" step="0.01" v-model="item.price" class="form-control">
</td>
...... more td + input with v-model
</tr>
Level 28
Have you tried using/assigning a unique key from your item objects instead of generating an index within the loop? That is probably something that is hurting you performance wise right now. Because with your current implementation, every time you add/remove an item in your list, Vue has to reassign indexes to all of your items.
Also, depending on the complexity of your HTML, browsers usually bottleneck when you have a shit load of rendered tags/data on your page and there's nothing you can do JS/Vue wise to help that.
Level 47
don't use index for v-for key use a item property instead, eg item.id item.name because everytime the virtualdom rewrite, the index will change.
Please or to participate in this conversation.