Vue v-model
Working with forms in Vue is simpler than in regular JavaScript since all input elements are connected to the v-model directive in an identical manner.
The input element value attribute and a data value in the Vue instance are linked by v-model. The data updates when the input changes, and the input updates when the data changes (two-way binding).
Two-way Binding
V-model gives us two-way binding, which means that form input elements update the Vue data instance and a change in the Vue instance data updates the inputs, as we have already seen in the shopping list example on the previous page.
The two-way binding using the v-model is also demonstrated in the example below.
Example
Two-way binding: Try typing something in the input field to see whether it updates the value of the Vue data property. To see how the input field is modified, try writing the code directly in the code and running it to modify the value of the Vue data property.
<div id="app">
<input type="text" v-model="inpText">
<p> {{ inpText }} </p>
</div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
inpText: 'Initial text'
}
}
})
app.mount('#app')
</script>
It is actually possible to accomplish the v-model two-way binding capabilities by combining v-bind:value and v-on:input:
- To update the input element using the Vue instance data, use v-bind:value.
- and use v-on:input to update the input-provided Vue instance data.
Nevertheless, we shall use the v-model since it is much simpler to use.
A Dynamic Checkbox
On the previous page, we add a checkbox to our shopping list so we may indicate whether or not an item is significant.
We place a sentence next to the checkbox that dynamically switches between the words “true” and “false,” always reflecting the current status of “important.”
To enhance user engagement, we add this dynamic checkbox and text using v-model.
We require:
- a ‘important’ boolean value in the Vue instance data attribute
- a dynamic feedback text that allows the user to determine whether the item is important;
- a checkbox for the user to indicate whether the item is important
The ‘important’ feature, removed from the shopping list, appears as follows.
Example
In order for the wording to reflect the current checkbox input value, the checkbox text is made dynamic.
<div id="app">
<form>
<p>
Important item?
<label>
<input type="checkbox" v-model="important">
{{ important }}
</label>
</p>
</form>
</div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
important: false
}
}
})
app.mount('#app')
</script>
Let’s incorporate this dynamic feature into our example of a shopping list.
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>
<p>
Important?
<label>
<input type="checkbox" v-model="itemImportant">
{{ important }}
</label>
</p>
<button type="submit">Add item</button>
</form>
<hr>
<p>Shopping list:</p>
<ul>
<li v-for="item in shoppingList">{{item.name}}, {{item.number}}</li>
</ul>
</div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
important: false,
shoppingList: [
{ name: 'Tomatoes', number: 5, important: false }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber
important: this.itemImportant
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
this.itemImportant = false
}
}
})
app.mount('#app')
</script>
Mark Found Items in The Shopping List
Now let’s add functionality to allow the marking of things as found when they are added to the shopping list.
We require:
- the list elements to respond when clicked
to change the status of the selected object to ‘found’, then use this to visually move the item aside and strike it through using CSS
We make two lists: one below with the items we discovered struck through, and one with all the items we still need to find. The items can be arranged in both the first and second lists, and the order in which they are shown can be simply set using the Vue data property ‘found’ in conjunction with v-show.
Example
We can act like we’re going shopping after adding items to the list and then clicking them away when we locate them. In case we accidentally click on an item, we can return it to the ‘not found’ list by clicking on it again.
<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>
<p>
Important?
<label>
<input type="checkbox" v-model="itemImportant">
{{ important }}
</label>
</p>
<button type="submit">Add item</button>
</form>
<p><strong>Shopping list:</strong></p>
<ul id="ulToFind">
<li v-for="item in shoppingList"
v-bind:class="{ impClass: item.important }"
v-on:click="item.found=!item.found"
v-show="!item.found">
{{ item.name }}, {{ item.number}}
</li>
</ul>
<ul id="ulFound">
<li v-for="item in shoppingList"
v-bind:class="{ impClass: item.important }"
v-on:click="item.found=!item.found"
v-show="item.found">
{{ item.name }}, {{ item.number}}
</li>
</ul>
</div>
<script data-minify="1" src="https://codingask.com/wp-content/cache/min/1/vue@3/dist/vue.global.js?ver=1730183021" defer></script>
<script>
const app = Vue.createApp({
data() {
return {
itemName: null,
itemNumber: null,
important: false,
shoppingList: [
{ name: 'Tomatoes', number: 5, important: false, found: false }
]
}
},
methods: {
addItem() {
let item = {
name: this.itemName,
number: this.itemNumber,
important: this.itemImportant,
found: false
}
this.shoppingList.push(item)
this.itemName = null
this.itemNumber = null
this.itemImportant = false
}
}
})
app.mount('#app')
</script>
Use v-model to make The Form Itself Dynamic
We can create a form that allows customers to select items from a menu. We only display the available drinks to the consumer once they have decided to place an order in order to simplify things for them. One could argue that this is preferable to giving the buyer every item on the menu at once. In this example, the form is made dynamic through the usage of v-model and v-show.
We require:
- An order button and pertinent input tags are present on a form.
- Radio buttons to choose between “Dinner,” “Drink,” and “Dessert.”
- A dropdown menu containing every item in the selected category shows once the category has been selected.
- You can select how many of an item to add to your purchase after selecting it and viewing an image of it. When an item is added to an order, the form is reset.
