[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.