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
