[SOLVED] Multi Q-Select with an array of objects
-
I’m trying to set up a multi select input box using chips, pretty much exactly like this codepen: https://codepen.io/anon/pen/qeNOyG?editors=1010
Except, instead of an array of strings, I have an array of objects like so. Where I want the
v-model
to keep track of an array of selected objects but only display thename
attribute on the chip.const options = [{ id: 'abc', name: 'Facebook' }, { id: 'def', name: 'Google' }, { id: 'xyz', name: 'Apple' }, ... ]
This doesn’t seem like a complicated use case, but I’ve pretty much memorized the docs at this point and can’t figure out how to make this work. Any help appreciated.
-
@coopersamuel
The answer you find here: https://quasar.dev/vue-components/select#Example--Custom-label%2C-value-and-disable-propsYou can change the label type and value using:
- option-value = “id”
- option-label = “name”
Also be sure to add:
- emit-value
- map-options
Select example:
<q-select filled v-model="model" use-input multiple map-options emit-value option-value="id" option-label="name" use-chips stack-label input-debounce="0" label="Simple filter" :options="options" @filter="filterFn" style="width: 250px" >
-
Hey @patryckx, thanks. I did see this section and I couldn’t get it working right, but I didn’t have
emit-value
ormap-options
. Let me give that a shot -
@patryckx looks like that works after adding
emit-value
andmap-options
, thanks! Although the model only has an array of theid
s. Is there anyway to emit the entire option rather than just the id? -
@coopersamuel Yes removing emit-value and map-options :
<q-select filled v-model="model" use-input multiple option-value="id" option-label="name" use-chips stack-label input-debounce="0" label="Simple filter" :options="options" @filter="filterFn" style="width: 250px" >
-
@patryckx thanks for the help
-
@coopersamuel Glad to help you.
-
@patryckx said in [SOLVED] Multi Q-Select with an array of objects:
@coopersamuel
The answer you find here: https://quasar.dev/vue-components/select#Example--Custom-label%2C-value-and-disable-propsYou can change the label type and value using:
- option-value = “id”
- option-label = “name”
Also be sure to add:
- emit-value
- map-options
Select example:
<q-select filled v-model="model" use-input multiple map-options emit-value option-value="id" option-label="name" use-chips stack-label input-debounce="0" label="Simple filter" :options="options" @filter="filterFn" style="width: 250px" >
The documentation need that!
-
@itslab3rt it’s already there, check API section and examples.
-
This post is deleted! -
This post is deleted!