Just a few weeks until the 2021 JavaScript Full-Stack Bootcamp opens.
Signup to the waiting list!
The v-model
Vue directive allows us to create a two-way binding.
You can bind a form input element for example, and make it change the Vue data property when the user changes the content of the field:
<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>
<select v-model="selected">
<option disabled value="">Choose a fruit</option>
<option>Apple</option>
<option>Banana</option>
<option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>
Handy directive modifiers
To make the model update when the change event occurs, and not any time the user presses a key, you can use v-model.lazy
instead of just v.model
.
Working with input fields, v-model.trim
is useful because it automatically removes whitespace.
And if you accept a number instead than a string, make sure you use v-model.number
.
Nested properties
Say you have a shopping cart, and you have a component that holds a form to add a product:
<template>
<div class="">
<h1>Add Product</h1>
<label>Name</label>: <input>
<label>Description</label>: <textarea></textarea>
<button @click="addProduct">Add</button>
</div>
</template>
<script>
export default {
name: 'AddProduct',
data() {
return {
product: {
name: '',
description: ''
}
}
},
methods: {
addProduct() {
console.log(this.product)
}
}
}
</script>
To make the form update the inner properties of the product
state value, you use product.*
:
<label>Name</label>: <input v-model="product.name">
<label>Description</label>: <textarea v-model="product.description"></textarea>
Download my free Vue Handbook
The 2021 JavaScript Full-Stack Bootcamp will start at the end of March 2021. Don't miss this opportunity, signup to the waiting list!
More vue tutorials:
- An overview of Vue.js
- The Vue.js CLI: learn how to use it
- The Vue.js DevTools
- Configuring VS Code for Vue Development
- Create your first app with Vue.js
- Vue.js Single File Components
- Vue.js templates and interpolations
- Vue.js Directives
- Vue.js Methods
- Vue.js Computed Properties
- Styling Vue.js components using CSS
- Vue.js Watchers
- Vue methods vs watchers vs computed properties
- Vue.js Filters
- Vue.js Components
- Vue.js Slots
- Vue.js Component Props
- Vue.js Events
- Vue.js Components Communication
- Vuex, the Vue.js State Manager
- Vue, use a component inside another component
- Vue, how to use a prop as the class name
- How to use SCSS with Vue.js Single File Components
- Using Tailwind with Vue.js
- The Vue Router
- Dynamically show a Vue component
- The Vue.js Cheat Sheet
- Store Vue data to localStorage using Vuex
- How to dynamically apply a class using Vue
- Vue, how to use v-model
- Vue, why data must be a function
- Roadmap to become a Vue.js developer in 2020