[SOLVED] Multi Q-Select with an array of objects

coopersamuel

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 the name 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.

patryckx

@coopersamuel
The answer you find here: https://quasar.dev/vue-components/select#Example--Custom-label%2C-value-and-disable-props

You 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"
        >

coopersamuel

Hey @patryckx, thanks. I did see this section and I couldn’t get it working right, but I didn’t have emit-value or map-options. Let me give that a shot

coopersamuel

@patryckx looks like that works after adding emit-value and map-options, thanks! Although the model only has an array of the ids. Is there anyway to emit the entire option rather than just the id?

patryckx

@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"
        >

coopersamuel

@patryckx thanks for the help

patryckx

@coopersamuel Glad to help you.

alhidalgodev

@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-props

You 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!

metalsadman

@itslab3rt it’s already there, check API section and examples.