How to make vuejs respond faster when using v-model on large data sets

Question

The application i'm working on renders an array of persons and their children. There are about 600 persons in the array. I am displaying the person name and the names of each person's children in text inputs so that they can be edited. I use a V-model for two way binding so I can easily save the edits.

<tr v-for="person in persons">
  <td>
    <input type="text" v-model="person.name" />
  </td>
  <td v-for="child in person.children">
    <input type="text" v-model="child.name" />
  </td>
</tr>

The problem is when I start typing in the textboxes, there is a lag and I have to wait some seconds before what I typed displays.

This doesn't happen when I use v-bind:value or when I reduce the number of persons coming from the api to say 50 persons. I could use pagination but my boss wants to see all the results displayed at once.

My question is, how can I make vue.js perform faster while using two way binding on large data?.

Answer 1

When you are dealing with bunch of data It's always good idea to integrate the sort of pagination, but sometimes It's just not an option.

There is modifier called .lazy that lives on v-model directive.What it does is sync input with data model after change event.

Usage is pretty simple:

<input v-model.lazy="msg" >

Docs: https://vuejs.org/v2/guide/forms.html#lazy

Answer 2

In reponse to Tarrakis, v-model.lazy isn't workign for you because you are using it on a custom component (a bootstrap form input component) and v-model.lazy doesn't work for custom components.