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



  • 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


Log in to reply