I\'m trying to show \"locations\" in a vuetify select component, but my current code renders \"[object Object]\" instead of Location 1, Location 2, etc.
My select co
For custom objects you have to specify the item-text
. The item-text
is what each option will display.
From your screenshot, for instance, title
is a possible property:
Demos below.
Without item-text
:
new Vue({
el: '#app',
data () {
return {
location: null,
locations: [
{ id: "1111", manager: 'Alice', title: 'Water Cart 1' },
{ id: "2222", manager: 'Bob', title: 'Water Cart 2' },
{ id: "3333", manager: 'Neysa', title: 'Water Cart 3' }
]
}
}
})
With item-text
:
new Vue({
el: '#app',
data () {
return {
location: null,
locations: [
{ id: "1111", manager: 'Alice', title: 'Water Cart 1' },
{ id: "2222", manager: 'Bob', title: 'Water Cart 2' },
{ id: "3333", manager: 'Neysa', title: 'Water Cart 3' }
]
}
}
})