Vue.js Form Input Binding lazy Modifier

Vue.js is a progressive javascript framework for developing web user interfaces. It is a performant, approachable, and versatile framework. We can create Single Page Applications as well as Full Stack applications. It is built on top of HTML, CSS, and Javascript which makes it easier for developers to integrate Vue.js in any application at any stage.

Form Input Binding is handled by the v-model directive that helps to bind the static strings, to simplify the input value binding. The lazy Modifier is used when syncing is not required instantaneously. After each input event is fired from the input element, the v-model modifies the variable. Instead, the lazy modifier updates the value on submit. This syncs the value after the change.

The lazy modifier is useful for textarea and input text elements as the elements are changed instantaneously. We can change the value once the change is being made. This is pretty useful where the search is being with the help of API. We can prevent unwanted API calls when the user enters the query.

Syntax: Add the lazy to the v-model in the input or textarea element as follows:

<!-- input element -->
<input type="text" v-model.lazy="name" />

<!-- textarea element -->
<textarea type="text" v-model.lazy="about"></textarea>

Example: In the following example, we have an input element as well as a textarea element. The changes made in the input and textarea elements are made once the focus is shifted from the elements. This is possible due to the lazy modifier. 

Step 1: Create a new Vue.js project with the npm node.js package manager using the following command.

npm init vue@latest

Enter the project name and preset the project as follows:

Project Structure: After successful installation, the following project structure will be formed.

Project Structure

Step 2: In the App.vue file, add the data members, name, and about for the v-model modifier. Vue.js will save the name and about from input and textarea respectively. Add the lazy modifier to the v-model as follows:

App.vue

<script>
export default {
  data() {
    return {
      name: '', about: ''
    }
  },
}
</script>

<template>
  <center>
    <h1 style="text-align: center; color: green;">GeeksforGeeks</h1>
    <strong>Vue.js Form Input Binding lazy Modifier</strong>
    <br />
    <br />
  </center>
  <center>
    <p>input element value: {{ name }}</p>
    <input type="text" v-model.lazy="name" />
    <p style="white-space: pre-line;">
        textarea element value: {{ about }}
    </p>
    <textarea type="text" v-model.lazy="about"></textarea>
  </center>
</template>

Step 3: Run the project using the following command and see the output.

npm run dev

On successfully building the project, open http://localhost:3000 and the result will be as follows.

Output:

Reference: https://vuejs.org/guide/essentials/forms.html#lazy