如何在Quasar Select下拉组件中以编程方式设置选中值

现有代码 #

q-select组件代码：

<q-select
    rounded
    outlined
    bottom-slots
    stack-label
    :dense="dense"
    v-model="sexSelected"
    :options="sexOptions"
    option-value="value"
    label="Sex"
    class="mystyle"
    map-options
  />

选项数组：

sexOptions: [
  { label: 'Both Sexes', value: '0' },
  { label: 'Male', value: '1' },
  { label: 'Female', value: '2' }
]

无效写法示例 #

this.sexSelected.value = "2" 

this.sexSelected = "Female"

this.sexSelected = [{label: 'Female', value: '2' }]

正确实现方式 #

核心原因：你给q-select添加了map-options属性，该属性会让v-model绑定整个选项对象，而非option-value指定的单个字段值。

方法1：从选项数组匹配赋值（推荐）

通过find方法定位目标选项对象，直接赋值给sexSelected：

// 选中Female
this.sexSelected = this.sexOptions.find(item => item.value === '2')

// 选中Male
this.sexSelected = this.sexOptions.find(item => item.value === '1')

方法2：直接赋值匹配结构的对象

若确定选项结构固定，也可直接创建对应对象赋值：

// 选中Female
this.sexSelected = { label: 'Female', value: '2' }

// 选中Male
this.sexSelected = { label: 'Male', value: '1' }

无效写法原因说明 #

• this.sexSelected.value = "2"：若sexSelected初始未定义为对象会报错；即使是对象，map-options要求绑定完整对象，仅修改属性无法触发组件更新选中状态。
• this.sexSelected = "Female"：map-options绑定的是对象类型，与字符串类型不匹配，无法选中。
• this.sexSelected = [{label: 'Female', value: '2' }]：当前q-select未开启多选（无multiple属性），v-model应为单个对象而非数组。

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