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



  • The below does the trick for me …

    emit-value
    map-options
    


  • 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
            });
          }
    }
    }
    

Log in to reply