q-select with pre-filled data, how to put value in the form but show label?



  • Hi everyone!
    I’m doing first steps in Quasar, using it just for rendering my website. And this time I’ve got an issue using q-select.
    I’m making the updating form, like there are some information already posted to DB, and I have to fill it up into the form. There are no problems doing this for some simple field types, like text input or date, etc. BUT there is a huge problem doing this for q-select.

    <q-select v-model="app" label="Appointment" :options="appointment" :dense="true">
        </q-select>
    
    <script>
    ...
    app: 'Option1',
    appointment: [
        {
            label: 'Option1',
            value: '1',
        },
        {
            label: 'Option2',
            value: '2',
        },
    ...
    </script>
    

    It grabs options from ‘appointment’ array, so there are no problems, all of the options (labels and values) are present and works pretty fine. But how to set up the default, or selected value (the value from db record)? If I set it up in v-model, then it goes like a label. If I put a value in v-model, it shows just ID, so it’s wrong.
    Are there any options to set up the default ‘value’ AND ‘label’?

    Eplain: On page load it shows ‘Option1’ selected, and it shows ‘Option1’ in value in the form. But if you select anything, eg. ‘Option2’, it will put ‘2’ in value (right way). How to put value in ‘value’ and show label?

    Thanks in advance!



  • Check “map-options” and “emit-value” props on QSelect !



  • @ouaR Thank you! Missed it out reading the article, and Google didn’t help!
    Resolved, and works fine!


Log in to reply