Quasar set default in Select Drop Down

Question

I have a Quasar Select:

    <q-select
    rounded
    outlined
    bottom-slots
    stack-label
    :dense="dense"
    v-model="geoStateColorSelected"
    :options="geoStateColorOptions"
    label="Select a Color for State display"
    class="mystyle"
    emit-value
    map-options
    @input= "geoStateColorChange()"      
  />

and my options is make up of :

    [ {
    label: 'NONE',
    value: []
  },
  {
    label: 'BLUE',
    value: ["#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"]
  },
  {
    label: 'ORANGE',
    value: ["#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"]
  }
],

If I set 'geoStateColorSelected: "BLUE"'

BLUE shows up in the Select Box but if I try to use the geoStateColorSelected I get BLUE rather than the Array object

First time:

let colorObject = this.geoStateColorSelected
    colorObject is "BLUE"  
 

but if I select a drop down value it using the Select I get

 let colorObject = this.geoStateColorSelected
  colorObject  is Array(6) 

which is what I want as the default value.

I've tried

created(){
     this.geoStateColorSelected = this.geoStateColorOptions.find(o => o.value == this.geoStateColorSelected)
    },

But get undefined

How can I set the default to the object?

My hack is:

let colorGroup = []
       if(this.geoStateColorSelected == "BLUE"){
        colorGroup = this.geoStateColorOptions[1]
      } else {
        colorGroup = this.geoStateColorSelected
      }

In the function that needs to use it.

Thanks

Answer 1

So the problem is you have added emit-value in q-select so it will only emit the valu not the whole option. So if you want to set the default value then you need value of the option.

Please refer following codepen.

https://codepen.io/Pratik__007/pen/abjZeWL