Set initial vuetify v-select value
Alternative answer for those finding this question from a search...
How to select default value using an attribute of an object
<template>
<v-select v-model="input.user_id" :items="users" item-value="id" item-text="name" label="Users"/>
</template>
<script>
export default {
data: () => ({
input: {
user_id: 2,
},
users: [
{
id: 1,
name: "John",
last: "Doe"
},
{
id: 2,
name: "Harry",
last: "Potter"
},
{
id: 3,
name: "George",
last: "Bush"
}
]
}),
}
</script>
Fiddle example: https://jsfiddle.net/4c3tbj6m/
Explain usage:
v-model
is a special interfacing method for the value
attribute of an <input />
field.
item-value="id"
tells the input
field what attribute
of a selected object
item row to set
as the value
of input.user_id
item-text="name"
tells the field what attribute
of a selected object
item row to use to display as the selected text.
See Official Documentation on v-model
.
Example above is a select
field so v-model
is representing value of what would be a selected
attribute of an option
element like the following:
<option value="1" selected>John</option>
The value of input.user_id
is the selected item (value set by the v-model
bind)
You can then POST the entirety of input
(if more input fields are added) but in this case there is only user_id
in there:
methods: {
save() {
axios.post('/my/api/example', this.input).then(response => {
console.log(response);
})
}
}
<v-btn @click.prevent="save">SAVE</v-btn>
This will POST
a JSON
object to your servers end point /my/api/example
formatted like this:
{
"user_id": 1
}
I believe there are two issues with your set up. Firstly, the initial value should be one of the options
in select
, i.e., you should have people
include your defaultSelected
; Secondly your object needs to contain a value
field, see v-select
props. Otherwise you need to specify item-value
prop; See a working example here.
<v-select
item-text="name"
item-value="last"
v-model="defaultSelected"
:items="people"
>
Vue.use(Vuetify);
const vm = new Vue({
el: "#app",
data: {
defaultSelected: {
name: "John",
last: "Doe"
},
people: [
{
name: "John",
last: "Doe"
},
{
name: "Harry",
last: "Potter"
},
{
name: "George",
last: "Bush"
}
]
}
});