Member-only story
Vue 3 — v-model Modifiers and Components
Vue 3 is in beta and it’s subject to change.
Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at how to use the Vue 3 v-model directive and create simple Vue 3 components.
Select Options
Select option values can be objects.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<select v-model="selected">
<option :value="{ fruiit: 'apple' }">apple</option>
<option :value="{ fruiit: 'orange' }">orange</option>
<option :value="{ fruiit: 'grape' }">grape</option>
</select>
<p>{{ selected }}</p>
</div>
<script>
const vm = Vue.createApp({
data() {
return { selected: {} };
}
}).mount("#app");
</script>
</body>
</html>to create a select dropdown that has option values bound to objects.
:value accepts an object.
So when we select a value, we’ll see that selected would also be an object.
This is because we set v-model ‘s value to selected .
v-model Modifiers
v-model can take various modifiers.
.lazy
The .lazy modifier makes v-model sync with the Vue instance state after each change event.
By default, v-model syncs with the state after each input event is emitted.
We can use that by writing:
<input v-model.lazy="msg" />.number
The .number modifier lets us convert whatever is entered to a number automatically.
For instance, we can write:
<input v-model.number="numApples" type="number" />to convert numApples to a number automatically.
By default, an HTML input’s value is always a string, so this is a useful shorthand.
