Can't seem to figure this one out. I'm using Quasar Framework, but it seems like more of a Vue issue.
I have a multiple-select UI component with a list of objects as options that I want to display. The v-model will bind to the currently selected option.
For example, let's say I'm trying to select an author from a list of authors. My component call looks like this:
<q-select
v-model="currentAuthor"
:options="authors"
label="Select an Author..."
/>
The problem is that the authors array contains objects instead of strings, for instance:
this.authors = [
{ first_name: 'Roald', last_name: 'Dahl', id: 1},
{ first_name: 'J.R.', last_name: 'Rowling', id: 2},
]
Using v-model with the raw object just displays "[object Object]" in the dropdown for each entry.
I don't want to convert the array of objects to an array of strings because I need the id attribute when an item is selected.
Is there a way to set a custom display value for the dropdown (like
${author.first_name} ${author.last_name}v-model?