Quasar Select下拉框默认值设置：绑定值类型不一致问题

问题分析 #

你使用了emit-value和map-options属性，这两个属性组合时，Q-Select会将选中项的value字段作为v-model的值返回（而非整个选项对象）。当你直接设置geoStateColorSelected: "BLUE"时，组件无法将字符串"BLUE"与选项中的数组value匹配，因此显示的是字符串，但实际值并非期望的颜色数组；而手动选择时，组件会正确返回对应选项的value数组。

你之前的created钩子写法错误，原因是用选项的value（数组）和字符串"BLUE"比较，永远无法匹配，所以返回undefined。

正确解决方案 #

方案一：直接设置默认值为对应数组 #

初始化时，将geoStateColorSelected直接设为BLUE选项对应的value数组，Q-Select会自动匹配到对应的标签显示：

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

方案二：从字符串标签初始化 #

如果必须以字符串"BLUE"作为初始值，可在created钩子中通过标签匹配对应的value数组：

data() {
  return {
    geoStateColorSelected: "BLUE", // 初始为字符串标签
    geoStateColorOptions: [
      { label: 'NONE', value: [] },
      { label: 'BLUE', value: ["#a6bddb","#74a9cf","#3690c0","#0570b0","#045a8d","#023858"] },
      { label: 'ORANGE', value: ["#fec44f","#fe9929","#ec7014","#cc4c02","#993404","#662506"] }
    ]
  }
},
created() {
  const matchedOption = this.geoStateColorOptions.find(opt => opt.label === this.geoStateColorSelected);
  if (matchedOption) {
    this.geoStateColorSelected = matchedOption.value;
  }
}

为什么之前的方法失败？ #

你之前的find判断条件是o.value == this.geoStateColorSelected，o.value是数组类型，而this.geoStateColorSelected是字符串"BLUE"，两者类型不同，比较结果永远为false，因此找不到匹配项，返回undefined。

内容的提问来源于stack exchange，提问作者Bill