Modificador perezoso de enlace de entrada de formulario Vue.js

Vue.js es un marco javascript progresivo para desarrollar interfaces de usuario web. Es un marco eficaz, accesible y versátil. Podemos crear aplicaciones de una sola página, así como aplicaciones de pila completa. Está construido sobre HTML, CSS y Javascript, lo que facilita a los desarrolladores la integración de Vue.js en cualquier aplicación en cualquier etapa.

El enlace de entrada de formulario es manejado por la directiva v-model que ayuda a enlazar las strings estáticas, para simplificar el enlace del valor de entrada. El modificador perezoso se usa cuando no se requiere sincronización instantánea. Después de que se activa cada evento de entrada desde el elemento de entrada, el modelo v modifica la variable. En cambio, el modificador perezoso actualiza el valor al enviar. Esto sincroniza el valor después del cambio.

El modificador perezoso es útil para el área de texto y los elementos de texto de entrada, ya que los elementos se cambian instantáneamente. Podemos cambiar el valor una vez que se está realizando el cambio. Esto es bastante útil cuando la búsqueda se realiza con la ayuda de la API. Podemos evitar llamadas API no deseadas cuando el usuario ingresa la consulta.

Sintaxis: agregue el perezoso al modelo v en el elemento de entrada o área de texto de la siguiente manera:

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

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

Ejemplo: en el siguiente ejemplo, tenemos un elemento de entrada y un elemento de área de texto. Los cambios realizados en los elementos input y textarea se realizan una vez que se cambia el enfoque de los elementos. Esto es posible gracias al modificador perezoso. 

Paso 1: Cree un nuevo proyecto Vue.js con el administrador de paquetes npm node.js usando el siguiente comando.

npm init vue@latest

Ingrese el nombre del proyecto y preestablezca el proyecto de la siguiente manera:

 

Estructura del proyecto: después de una instalación exitosa, se formará la siguiente estructura del proyecto.

Estructura del proyecto

Paso 2 : en el archivo App.vue, agregue los miembros de datos, el nombre y acerca del modificador v-model. Vue.js guardará el nombre y sobre de entrada y área de texto respectivamente. Agregue el modificador perezoso al modelo v de la siguiente manera:

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

Paso 3: Ejecute el proyecto usando el siguiente comando y vea el resultado.

npm run dev

Al construir con éxito el proyecto, abra http://localhost:3000 y el resultado será el siguiente.

Producción:

 

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