Quasar 在 Select 下拉菜单中设置默认值

Question

我有一个类星体 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()"      
  />

我的选择包括：

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

如果我设置 'geoStateColorSelected: "BLUE"'

蓝色出现在 Select 框中，但如果我尝试使用 geoStateColorSelected，我会得到蓝色而不是数组 object

第一次：

let colorObject = this.geoStateColorSelected
    colorObject is "BLUE"  
 

但是如果我使用 select 下拉值它使用 Select 我得到

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

这是我想要的默认值。

我试过了

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

但是得到 undefined

如何将默认值设置为 object？

我的技巧是：

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

在需要使用它的 function 中。

谢谢

Answer 1

所以问题是你在 q-select 中添加了emit-value所以它只会发出 value 而不是整个选项。 所以如果你想设置默认值，那么你需要选项的值。

请参考以下codepen。

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