No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    3
    440
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • K
      kuazaar last edited by kuazaar

      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!

      1 Reply Last reply Reply Quote 0
      • O
        ouaR last edited by

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

        K 1 Reply Last reply Reply Quote 0
        • K
          kuazaar @ouaR last edited by

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

          1 Reply Last reply Reply Quote 0
          • First post
            Last post