V-model and v-for becomes slow when dealing with large datasets.

[Kokleng-Dev]

"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>

[Shyam-Chen]

:key="item.id"

[Kokleng-Dev]

How about when item is duplicate ( it has the same id) ?

[LinusBorg]

It's not straightforward to give a real solution without runnable code, and I'm a bit suprised 30 elements are causing an issue.

But key and v-memo could be useful here.

<tr v-for="(item,index) in items" :key="item.id" v-memo="[item.price, item.name, ....]">
 <td> .... </td>
 <td>
    <input type="number" step="0.01"  v-model="item.price" class="form-control">
 </td>
  ...... more td + input with v-model
</tr>

Be sure to read the docs for v-memo to make sure you understand the implications
https://vuejs.org/api/built-in-directives.html#v-memo

[Kokleng-Dev]

But in the documentation of vue js : When using v-memo with v-for, make sure they are used on the same element. v-memo does not work inside v-for.

[LinusBorg]

You're right, I put it on the wrong element. Moved it up to the <tr>