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

November 24, 2018

Vue allows design and manipulates forms elements fast and easy, this is the list of the most common task when we work with HTML forms.

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 for each keystroke.

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

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


Pick a list of checkboxes and store it 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.id">{{acc.description}}</option> </select>

Submit Form

This is not part of 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>


Originally published at danywalls.com on November 24, 2018.

Dany Paredes

Hi, I'm Dany Paredes, few years ago I was working with .NET, but in my last years I have been focusing in Javascript using Vue , Angular or React. You can read more in Twitter or Github.