9

I have the following code for my select

     <q-select label="Select country"
                behavior="menu"
                :lazy-rules="true"
                :rules="[val => !!val || 'Select your country']"
                dense outlined v-model="form.code" :options="countries"
                option-label="name" option-value="code">
      </q-select>

And my vuejs code i have

<script>
   export default{
      data:()=>({

        form:{
            code:""
         }
        countries:[
              {name:"Country-1", code:"+101"},
              {name:"Country-2", code:"+201"},
           ]
       })

     }

 <script>

From the above i expect the value of form.code to be the code eg: +101 but when i check i find the value is the full object. What am i missing since on my select i have already set the option-label and option-value What am i missing?

Geoff
  • 6,277
  • 23
  • 87
  • 197

2 Answers2

14

You need to use emit-value and map-options, see: https://quasar.dev/vue-components/select#affecting-model

xlm
  • 6,854
  • 14
  • 53
  • 55
Robert Niestroj
  • 15,299
  • 14
  • 76
  • 119
0

Currently way to that with your custom object name is too override, see https://quasar.dev/vue-components/select#custom-prop-names

Mahadi Hassan
  • 149
  • 1
  • 8