How to get v-select items inside items? - select

Question

I have a dropdown with v-select
<v-select
label="Select"
v-bind:items="companies"
v-model="e11"
item-text="employee.name"
item-value="name"
max-height="auto"
>
</v-select>
Data from API like
new Vue({
el: '#app',
data () {
return {
e11: [],
companies: [
{
companyName: 'Google',
employee: [{
name: 'Sandra Adams',
name: 'Ali Connors',
name: 'Trevor Hansen',
name: 'Tucker Smith',
}]
},
{
companyName: 'Facebook',
employee: [{
name: 'Sandra Adams',
name: 'Ali Connors',
name: 'Trevor Hansen',
name: 'Tucker Smith',
}]
},
{
companyName: 'Twitter',
employee: [{
name: 'Sandra Adams',
name: 'Ali Connors',
name: 'Trevor Hansen',
name: 'Tucker Smith',
}]
},
]
}
}
})
In dropdown item getting [object object] to fixed fixed it? I want to get dropdown list with grouped by company name.
Here is what I want to do
Here is the codepen link https://codepen.io/yurenlimbu/pen/bGVKGEa?editors=1011

Answer 1

I had a crack at it, as ive also had some issues in the past with vuetify dropdown, i managed to get it to work, you may need to update your current data objects to make the name key unique in the list.
Added computed property to map companies and employees and inject the employees company so we have one object with the data we need
mappedNames: function() {
return this.companies.map(function(person) {
person.employee.forEach(e => e.company = person.companyName)
return person.employee
})
}
Helper function to concat the arrays from the map
item-value prop update to access entire object, and linked to e11 v-model
Here is the codepen:
https://codepen.io/mcwalshh/pen/Vwvdvve
EDIT:
I've included the slot for item and selected item, so you can change how the data is displayed inside the select:
<template v-slot:selection="data">
{{ data.item.name }} - {{ data.item.company }}
</template>
ref: https://vuetifyjs.com/en/components/selects/
Here is the updated codepen:
https://codepen.io/mcwalshh/pen/rNOKqvd
EDIT #2:
Not really sure how to go about adding titles, i suggest reading more vuetify documentation, or perhaps in my example, use the helper in the text-name instead of the items to access companyName. But following from my previous posts, i think the potential way of doing it, is to inject/unshift an object into the employees with:
{ name: person.employee.companyName, type: "title" }
For now in my example i add it straight to the object, then use template v-if's to determine what is a title:
codepen: https://codepen.io/mcwalshh/pen/NWGzeoK
Now just a matter of targeting parent to match your gif, but im in no way saying this is the best approach, like i said before i had issues with vuetify in the past, so i hope this can help get you by until you work out the best method