Vue Forms

Text, Textarea and Select Bindings

<input type="text" v-model="username" />

const app = new Vue({ 
  el: '#app',
  data: { username: 'Michael' } 
});

Radio Button Bindings

<legend>How was your experience?</legend>

<input type="radio" id="goodReview" value="good" v-model="experienceReview" />
<label for="goodReview">Good</label>

<input type="radio" id="neutralReview" value="neutral" v-model="experienceReview" />
<label for="neutralReview">Neutral</label>

<input type="radio" id="badReview" value="bad" v-model="experienceReview" />
<label for="badReview">Bad</label>

const app = new Vue({ 
  el: '#app', 
  data: { experienceReview: '' } 
});

Array Checkbox bindings

<legend>Which of the following features would you like to see added?</legend>

<input type="checkbox" id="search-bar" value="search" v-model="requestedFeatures">
<label for="search-bar">Search Bar</label>

<input type="checkbox" id="ads" value="ads" v-model="requestedFeatures">
<label for="ads">Ads</label>

<input type="checkbox" id="new-content" value="content" v-model="requestedFeatures">
<label for="new-content">New Content</label>

const app = new Vue({ 
  el: '#app', 
  data: { requestedFeatures: [] } 
});

Devuelve según los checkbox marcados [‘search’, ‘content’]

Boolean Checkbox bindings

<legend>Would you recommend this site to a friend?</legend>
<input type="checkbox" v-model="wouldRecommend" />

const app = new Vue({ 
  el: '#app',
  data: { wouldRecommend: false } 
});

Form Event Handlers

Todo lo que pueda suceder en una aplicación web, desde que un usuario hace clic en un botón hasta una información que proviene de una base de datos, se considera un evento.

<form v-on:reset="resetForm">
...
  <button type="reset">Reset</button>
</form>

const app = new Vue({ 
  el: '#app', 
  methods: { resetForm: function() { ... } }
});

Form Event Modifiers

Por ejemplo Event.preventDefault() para detener en el navegador el comportamiento por defecto del evento o Event.stopPropagation() que impide que el evento continúe manejándose más allá del controlador actual.

<form v-on:submit.prevent="submitForm">
  ...
</form>

<form v-on:submit.stop="submitForm">
  ...
</form>

Ver lista de modificadores disponibles

Input Modifiers

Vue ofrece los siguientes modificadores para v-model:

.number
Convierte automáticamente el valor del campo a número

.trim
Elimina los espacios en blanco del principio y el final del valor del campo

.lazy
Solo actualiza los valores de datos cuando se activan los eventos de cambio (a menudo cuando un usuario se aleja del campo de formulario en lugar de después de cada pulsación de tecla)

Ver la documentación

Form Validation

Hay diferentes métodos de implementar una validación en Vue, así que nos centraremos en uno de los más comunes.

<button type="submit" v-bind:disabled="!formIsValid">Submit</button>

const app = new Vue({ 
  el: '#app', 
  computed: { 
    formIsValid: function() { ... } 
  }
});

Descargar la DEMO completa