QSelect behaviour different from HTML Select

[pwfraley]

Hi,

I noticed the QSelect behaves different from deault HTML select.

I have a select: maritalStatus, which is a uid. The Options for the Select look like this:

[
  {
    id: UID,
    shortText: 'maried'
  },
  {
    id: UID,
    shortText: 'divorced'
  }
]

In the Dropdown of the select everything works fine (it shows the ShortText), but in the Input it shows the option-value and not like in HTML the option-label.

<q-select v-model="personFormModel.maritalStatus" @input-value="savePerson" emit-value :options="maritalStatus" option-value="id" option-label="shortText" options-cover label="Familienstand" />

Sorry the Screenshot is in German

How can I get the qselect to behave like a regular HTML Select, where the SelectedValue would display the label and not the value?

[pwfraley]

QuasarVersion: 2.0.0-beta.8

[pwfraley]

Ok I figured it out. I was missing the “map-options” in the Select. After adding this it worked like expected

<q-select for="maritalStatus" v-model="personFormModel.maritalStatus" @update:modelValue="savePerson" map-options emit-value :options="maritalStatus" option-value="id" option-label="shortText" label="Familienstand" />