CODEWITHSUNDEEP
vuejs2quasar-framework
Geoff
Geoff

Reputation: 6639

Quasar framework q-select sets an object in the v-model than the id

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?

Upvotes: 12

Views: 27122

Answers (2)

Mahadi Hassan
Mahadi Hassan

Reputation: 310

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

Upvotes: 1

Robert Niestroj
Robert Niestroj

Reputation: 16131

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

Upvotes: 18

Related Questions