Sometimes, we want to set initial Vuetify v-select value with Vue.js.
In this article, we’ll look at how to set initial Vuetify v-select value with Vue.js.
How to set initial Vuetify v-select value with Vue.js?
To set initial Vuetify v-select value with Vue.js, we set the value of the reactive property that’s bound to v-model
to the value of the property that we set as the value of the item-value
prop of the v-select
.
For instance, we write
<template>
<div>
<v-select
v-model="input.userId"
:items="users"
item-value="id"
item-text="name"
label="Users"
/>
</div>
</template>
<script>
//...
export default {
//...
data() {
return {
input: {
userId: 2,
},
users: [
{
id: 1,
name: "John",
last: "Doe",
},
{
id: 2,
name: "Harry",
last: "Potter",
},
{
id: 3,
name: "Jane",
last: "Smith",
},
],
};
},
//...
};
</script>
to set the input.userId
reactive property to 2, which is value of the id
property of the item in users
that we want to be the default.
Therefore, ‘Harry Potter’ would be the default value since it has id
2 and item-value
is set to id
.
Conclusion
To set initial Vuetify v-select value with Vue.js, we set the value of the reactive property that’s bound to v-model
to the value of the property that we set as the value of the item-value
prop of the v-select
.