q-select options object property with array of objects inside it

[numero14-dev]

Hi
I'm trying to show my options data list using the q-select component. but my option list is a little different. I have a property (List) with an array of objects inside the options array of objects.

My options like this:

options: [ { label: 'Users', list: [ { name: 'John', lastName: 'Doe' }, { name: 'Martin', lastName: 'Devae' }, ], }, { label: 'Admins', list: [ { name: 'Mark', lastName: 'Zenbio' }, { name: 'Povel', lastName: 'Kole' }, ], }, ],

and my code:

<q-select filled v-model="model" :options="options" dense options-selected-class="text-cyan-7" > <template v-slot:option="scope"> <div class="labels" v-bind="scope.itemProps" v-on="scope.itemEvents">{{ scope.opt.label }}</div> <q-item v-bind="scope.itemProps" v-on="scope.itemEvents"> <q-item-section v-bind="scope.itemProps" v-on="scope.itemEvents"> <q-item-label v-html="scope.opt.list" /> </q-item-section> </q-item> </template> <template v-slot:selected> {{ model.list }} </template> </q-select>

now I don't know how I can have another loop inside the 'list' property to show Something like this image I attached.

labels are not selectable.

Thanks

[metalsadman]

@numero14-dev something like this https://codepen.io/metalsadman/pen/QWpLjKa?editors=1000.

[numero14-dev]

Thank you!