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.
Multiple Select
Select elements that let us do multiple selections work with the v-model directive.
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" multiple>
<option disabled value="">Please select one</option>
<option>apple</option>
<option>orange</option>
<option>grape</option>
</select>
<p>{{ selected }}</p>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
selected: []
};
}
}).mount("#app");
</script>
</body>
</html>
We have the select element which has the multiple attribute.
The selected variable is a variable instead of a string since it can contain multiple values.
v-model is bound to the selected array so that Vue can get all the selected values and put it in the array.
Now when we choose multiple options from the select box, we can see all of them in an array.
Dynamic Options
We can add dynamic options in the select element.
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 disabled value="">Please select one</option>
<option v-for="option in options" :value="option.value">
{{ option.text }}
</option>
</select>
<p>{{ selected }}</p>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
selected: [],
options: [
{ value: "apple", text: "apple" },
{ value: "orange", text: "orange" },
{ value: "grape", text: "grape" }
]
};
}
}).mount("#app");
</script>
</body>
</html>
to render the options with the v-for directive.
option.value is used as the value of each option .
and option.text is used as the value of each text entry.
Value Bindings
Radio buttons and select elements are bound to string with v-model .
Checkboxes are bound to boolean values.
We can use the v-bind directive to bind to types of values that are different from the default.
For example, 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">
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
/>
<p>{{ toggle }}</p>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
toggle: ""
};
}
}).mount("#app");
</script>
</body>
</html>
We added the true-value and false-value props so that the checkbox bind to those values instead of a boolean.
So true is 'yes' and false is 'no' .
That’s what we’ll see when we click the checkbox.
We can do the same thing with radio buttons.
For example, 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">
<input type="radio" v-model="selected" :value="apple" />
<label>apple</label>
<input type="radio" v-model="selected" :value="orange" />
<label>orange</label>
<p>{{ selected }}</p>
</div>
<script>
const vm = Vue.createApp({
data() {
return { selected: "", apple: "apple", orange: "orange" };
}
}).mount("#app");
</script>
</body>
</html>
We dynamically bound the value with the :value directive instead of setting the value statically.
Since v-model of both radio buttons are set to the same value, we can select between them.
Then their value will be displayed.
Conclusion
Many kinds of form controls work with the v-model directive.
Also, we can bind to their values in different ways.
