CODEWITHSUNDEEP
javascriptquasar
Bill
Bill

Reputation: 1477

Quasar set default in Select Drop Down

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

Upvotes: 0

Views: 2035

Answers (1)

Pratik Patel
Pratik Patel

Reputation: 6978

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

Upvotes: 2

Related Questions