Keep the control in your HTML forms with v-model and Vue.

Vue allows design and manipulates forms elements fast and easy, these are the most common task when we are building formulary.

Binding Input

Use : or v-bind into value property can help you to bind data into the HTML input or use the v-model directive.

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

Using modifiers .lazy, .number and .trim

Change the input value on the change event instead in each keystroke. <input type="text" v-model.lazy="username"/>

Force the input cast his value to number. <input type="text" v-model.number="age" />

Remove empty spaces. <input type="text" v-model.trim="secretkey" />


Show a list of checkboxes and store his values into an array.

<input type="checkbox" value="lakers" v-model="adsList" /> <input type="checkbox" value="sixers" v-model="adsList"/>

Radio buttons

Show a few radio button options and only allow the user to pick one option.

<input type="radio" value="weekly" v-model="frecuency"/> <input type="radio" value="monthly" v-model="frecuency"/>

Get the selected value into a dropdown.

<select v-model="selectedAccount"> <option v-for="acc in accounts" :value="">{{acc.description}}</option> </select>

Submit forms

This isn't linked with the v-model but is a common task when we work with HTML forms, prevent submit forms to be processed with Vue.

<button @click.prevent="savePreferences">Save</button>