Cómo crear un bindeo de variables con v-model de Vue

Última actualización:

Dentro del Sistema de vistas de Vue existe una forma de poder recuperar el valor de elementos de formularios.

Esa forma se llama v-model y es una forma bidireccional de comunicar la vista con la lógica del componente.

Su sintaxis es muy sencilla, tan solo tienes que poner v-model y entre comillas la variable que quieres usar para guardar el valor del elemento del formulario, por ejemplo:

<input type="text" v-model="title" >

Para el ejemplo anterior, cuando el usuario escriba en el input, automáticamente su valor se guardará dentro de la variable title del componente.

Por lo tanto, para que funcione el ejemplo anterior tienes que tener entre las Variables de Vue una que se llame title:

<script>
export default {
  name: "MiComponente",
  data: () => ({
    title: ""
  }) 
};
</script>

Pero ojo, porque como hemos dicho la relación entre la variable y el input es bidireccional, eso significa que si la variable tiene un valor inicial (o cambias el valor de la variable a posteriori) el input también cambiará con el nuevo valor, por ejemplo:

<template>
  <input type="text" v-model="title" >
</template>

<script>
export default {
  name: "MiComponente",
  data: () => ({
    title: "Hello World"
  }) 
};
</script>

En el ejemplo anterior el input cuando cargue tendrá como value inicial Hello World.

La sintaxis de v-model es en realidad azúcar sintáctico de esta otra sintaxis que es también valida.:

<template>
  <input type="text" :value="title" @input="title = event.target.value">
</template>

<script>
export default {
  name: "MiComponente",
  data: () => ({
    title: "Hello World"
  }) 
};
</script>

Pero obviamente lo recomendable es usar la sintaxis de v-model ya que es más corta, te lo enseño más que nada para que veas lo que hace por debajo.

v-model en otros elementos de formulario

Pero no solo se puede usar el v-model para inputs de texto normales, también lo puedes usar para textareas:

<textarea v-model="message"></textarea>

Para checkboxes, que en este caso la variable tendrá true o false:

<input type="checkbox" v-model="isDarkModeActive">

Para radio buttons, que en ese caso el valor de la variable será el value que definas como atributo del radio button:

<input type="radio" value="Ejemplo" v-model="radioValue">

Para el ejemplo anterior la variable de radioValue tendrá como valor Ejemplo cuando el radio esté activado, esto se hace para que puedas tener varios radio buttons y todos con v-model a la misma variable. Con una sola variable vas a saber qué radio button está activado.

Por último tambien se puede usar v-model para selects nativos de HTML.

<select v-model="selected">  
 <option disabled value="">Selecciona un animal</option>  
 <option>Perro</option>  
 <option>Gato</option>  
 <option>Conejo</option>  
</select>

Date cuenta de que en este caso el v-model se pone directamente en el select y no para cada opción. Cuando el usuario seleccione un elemento el valor de la variable selected cambiará con el valor de la option seleccionada por el usuario.

Modificadores de v-model

Cuando usas el v-model también puedes usar una serie de modificadores que cambian el comportamiento del v-model.

Posibles modificadores:

  • lazy: Con lazy la actualización de la variable en lugar de ocurrir dentro del evento input se hace en el evento change de Javascript, lo que hace que sea un poco más rápido para actualizaciones muy rápidas.
  • number: El valor se guardará en la variable como un número en lugar de string haciendo un parseo con parseFloat.
  • trim: Al guardar el valor de la variable se pasará antes por la función de trim para quitar espacios antes y después del string.

Para usar un modificador solo tienes que poner un punto y el modificador que quieras tras el v-model por ejemplo:

<input type="number" v-model.number="numberOfUsers" >