How to make vuejs respond faster when using the v model on large datasets

Question

The application I'm working on displays a lot of people and their children. The array is about 600 people. I show the name of the person and the names of each person in text entries so that they can be edited. I use V-modelfor two-way binding, so I can easily save the changes.

<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 text fields, there is a lag, and I have to wait a few seconds before what I typed.

This does not happen when I use v-bind:valueor when I reduce the number of people coming from api to say 50 people. I could use pagination, but my boss wants to see all the results right away.

: vue.js , ?

Answer 1

, , .

.lazy v-model .

:

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

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

Answer 2

, v-model.lazy . , , .

:

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

:

<input :value="msg" @change="v => msg = v">

, ( , <b-form-input> Bootstrap-vue)