Set Initial Vuetify v-Select Value
Can Someone Help Me Set the Default Value for a v-Select? the Caveat Is That My v-Select Is Populated with Objects, Which I Think Might Be the Reason Why...
Can someone help me set the default value for a v-select? The caveat is that my v-select is populated with objects, which I think might be the reason why assigning my item-value to my desired initial value isn't working:
<v-select
item-text="name"
v-model="defaultSelected"
:items="people"
>
Vue.use(Vuetify);
const vm = new Vue({
el: "#app",
data: {
defaultSelected: {
name: "John",
last: "Doe"
},
people: [
{
name: "Harry",
last: "Potter"
},
{
name: "George",
last: "Bush"
}
]
}
});
Expected:
The initial v-select should be John
Actual:
The initial v-select is blank. Here's a fiddle for reference:
Can someone help? Thanks in advance!
4 Answers
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"
}
]
}
});
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:
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
}
For anyone who stumbles upon this and needs a vue 3 composition api typescript solution for select with objects:
<template>
<select v-model="state.selectedShape">
<option
v-for="(shape) in state.shapes"
:key="shape.id"
:value="shape">
{{ shape.description }}
</option>
</select>
</template>
<script>
setup () {
const state = reactive({
selectedShape: new Shape(),
shapes: Array<Shape>(),
});
}
</script>
Like this you can update the shape object and array equally and all of those will be reactive.
To get an initial value what I did was this because I also insert other values from an api, but I'm sure there's better ways:
state.shapes.push(new Shape());
Either way, I did all this because I don't want null values, and instead of new Shape() I actually use a default shape which has the description "All", so that when I select it I have a Shape with no actual data and an id of 0.
just add selected:true
items: [
{
text: "Name",
value: "name",
selected: true,
},
{
text: "Identifier",
value: "id",
},
{
text: "Episode",
value: "ep",
},
],
James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
