Vue Forms
Vue gives us an easy way to improve the user experience with forms by adding extra functionality like responsiveness and form validation.
Vue uses the v-model directive when handling forms.
Our First Form with Vue
Lets start with a simple shopping list example to see how Vue can be used when creating a form.
For more information about forms in HTML, with related tags and attributes, see our HTML Forms tutorial.
1. Add standard HTML form elements:
<form>
<p>Add item</p>
<p>Item name: <input type="text" required></p>
<p>How many: <input type="number"></p>
<button type="submit">Add item</button>
</form>
2. Create the Vue instance with the current item name, number and the shopping list, and use v-model to connect our inputs to it.
<div id="app">
<form>
<p>Add item</p>
<p>Item name: <input type="text" required v-model="itemName"></p>
<p>How many: <input type="number" v-model="itemNumber"></p>
<button type="submit">Add item</button>
</form>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
shoppingList: [
{ name: 'Tomatoes', number: 5 }
]
}
}
})
app.mount('#app')
</script>
3. Call the method to add an item to the shopping list, and prevent the default browser refresh on submit.
<form v-on:submit.prevent="addItem">
4. Create the method that adds the item to the shopping list, and clears the form:
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
}
this.shoppingList.push(item);
this.itemName = null
this.itemNumber = null
}
}
5. Use v-for to show an automatically updated shopping list below the form:
<p>Shopping list:</p>
<ul>
<li v-for="item in shoppingList">{{item.name}}, {{item.number}}</li>
</ul>
Below is the final code for our first Vue form.
Example
In this example we can add new items to a shopping list.
<div id="app">
<form v-on:submit.prevent="addItem">
<p>Add item</p>
<p>Item name: <input type="text" required v-model="itemName"></p>
<p>How many: <input type="number" v-model="itemNumber"></p>
<button type="submit">Add item</button>
</form>
<p>Shopping list:</p>
<ul>
<li v-for="item in shoppingList">{{item.name}}, {{item.number}}</li>
</ul>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
shoppingList: [
{ name: 'Tomatoes', number: 5 }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
}
}
})
app.mount('#app')
</script>
Try it Yourself ยป
Notice the two-way binding v-model provides in the example above:
v-modelupdates the Vue instance data when the HTML input changev-modelalso updates the HTML input when the Vue instance data changes
To learn more about v-model and see more form examples, click 'Next'.
