How to get QSelect to display a label instead of a value

[digiproduct]

How do you get QSelect to display the label instead of the value?

Often you might wish to display the label value of your options in the QSelect rather than the actual value.

For example, if you have a QSelect for salesRegionId but wish to show the descriptive label of that region. eg.
Label: North East
Value: 3

To get this to work in that way, you need to add two settings to your QSelect

emit-value
map-options

Here’s the example code quickly …

        <q-select
          filled
          v-model="salesRegionID"
          :options="options"
          label="Standard"
          emit-value
          map-options
        ></q-select>

and here’s the sample data

      salesRegionID: null,
      options: [
        {
          label: 'North West',
          value: '1'
        },
        {
          label: 'North Central',
          value: '2'
        },
        {
          label: 'North East',
          value: '3'
        },
        {
          label: 'South West',
          value: '4'
        },
        {
          label: 'South Central',
          value: '5',
        },
        {
          label: 'South East',
          value: '6',
        },
      ]

You can find a reference to this in the docs at
https://quasar.dev/vue-components/select#Example--Map-options

And here’s a codepen, showing the above example if you want to try it out
https://codepen.io/david-watson-the-encoder/pen/eqNrZz

[stuffy]

The below does the trick for me …

emit-value
map-options

[alexeilevinzon]

hello,

what if I need to update the value?
in the database I saved the id of selection, when I pass it it shows the id and not the name…

options: [
        {
          label: 'North West',
          value: '1'
        },
        {
          label: 'North Central',
          value: '2'
        },
        {
          label: 'North East',
          value: '3'
        },
        {
          label: 'South West',
          value: '4'
        },
        {
          label: 'South Central',
          value: '5',
        },
        {
          label: 'South East',
          value: '6',
        },
      ]

if I choose South West it will be saved as 4 in the db, when I pass 4 for editing I should see the “South West” in the box, but I see 4.

how can I solve it?

UPDATE

My solution is create computed model to handle that issue
I’m using vuex so it how I handled it:

 computed: { 
options: {
      get() {
        let val = this.GET_VALUE("my_selected_id");

        if (val && val > 0) {
          return this.options.find(x => x.id === val);
        }
      },
      set(value) {
        this.SET_VALUE({
          key: "my_selected_id",
          value
        });
      }
}
}

[davidreyg]

hey @alexeilevinzon can y show me your store.js file? or a github repo with the full example? Thanks c: