Vue Forms
With Vue, we can easily add more functionality to forms, such as form validation and responsiveness, to enhance the user experience.
Vue handles forms via the v-model directive.
Our First Form with Vue
To demonstrate how Vue may be used while designing a form, let’s start with a straightforward shopping list example.
See our HTML Forms tutorial for more details on forms in HTML, including associated tags and attributes.
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. Use v-model to connect our inputs to the Vue instance that has been created with the shopping list, item name, and number now in use.
<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 data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1742919599" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
shoppingList: [
{ name: 'Tomatoes', number: 5 }
]
}
}
})
app.mount('#app')
</script>
3. Make use of the approach to add an item to the shopping list and stop the browser from refreshing by default when you submit it.
<form v-on:submit.prevent="addItem">
4. Develop the procedure that both clears the form and adds the item to the shopping list:
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
}
this.shoppingList.push(item);
this.itemName = null
this.itemNumber = null
}
}
5. To display an automatically updated shopping list beneath the form, use v-for:
<p>Shopping list:</p>
<ul>
<li v-for="item in shoppingList">{{item.name}}, {{item.number}}</li>
</ul>
The completed code for our first Vue form is shown below.
Example
We can add additional products to a shopping list in this example.
<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 data-minify="1" src="https://codingfind.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1742919599" defer></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>
Take note of what the v-model two-way binding offers in the preceding example:
- When changes are made to the HTML input, v-model updates the Vue instance data.
- The HTML input is also updated by v-model when the Vue instance data changes.
Click ‘Next’ to view other form samples and learn more about v-model.
