Member-only story
Vue 3 — v-model Modifiers and Components
3 min readOct 18, 2020
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.
