Vue中input-select的v-model获取选中索引而非县名如何解决

问题核心原因 #

1. 你向input-select传入的options是Set结构而非普通数组，绝大多数Vue下拉组件对Set结构的兼容性较差，内部遍历时会默认把索引作为绑定值返回给v-model
2. 你用下标retarr[i]直接赋值的写法会导致不满足state_id匹配条件的下标位置留空，最终生成的Set里会有多余的undefined项

修复方案 #

第一步：修正getCountyList返回值格式

推荐直接返回所有下拉组件通用的{label: 显示名, value: 绑定值}格式数组，确保返回的绑定值就是县名本身：

getCountyList: function () {
  const countyNameSet = new Set()
  for (let i = 0; i < json.length; i++) {
    if (json[i].state_id == this.state) {
      countyNameSet.add(json[i].county_name)
    }
  }
  // 去重后过滤空值，转成标准选项数组
  return [...countyNameSet].filter(Boolean).map(name => ({
    label: name,
    value: name
  }))
}

第二步：补充组件属性配置（按需调整）

如果你使用的input-select组件需要显式指定选项的显示字段和绑定字段，补充对应的props即可：

<input-select 
  v-model="county" 
  id="county" 
  :options="getCountyList()"
  label-key="label"
  value-key="value"
>
  † County
</input-select>

如果你的组件默认就支持label/value字段的识别，可以不用加这两个属性，修改完getCountyList方法后v-model就能直接拿到选中的县名。

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