Vue3下拉框默认未选中首个提示选项问题求助

嘿，这个问题我之前也踩过坑！核心原因是你绑定的v-model变量初始值和第一个提示选项的value不匹配，Vue找不到对应的选项，所以下拉框就显示为空了，给你几个实用的解决步骤：

• 给提示选项设置明确的value
  你的第一个<option>没指定value，它默认的value是空字符串""，但得明确写出来让Vue能精准匹配：

  <select v-model="selectModel" @change="changeSelect">
    <option value="">Select option</option>
    <option v-for="item in props.options" :value="item.value" :key="item.value">{{ item.text }}</option>
  </select>
  

• 让selectModel的初始值和提示选项的value一致
  你需要确保selectModel的初始值是空字符串（和上面的value对应），比如用ref定义的话：

  import { ref, defineProps } from 'vue';
  
  interface Props {
    options: { value: number; text: string }[] | null;
  }
  
  const props = defineProps<Props>();
  const selectModel = ref(""); // 初始化为空字符串，和提示选项的value匹配
  

• 额外小提醒：注意value的类型匹配
  看你的props定义，item.value是number类型，但JSON里的value是字符串"1"、"2"，这里会有类型不匹配的问题，可能导致后续选中时出现异常。你可以把props里的value类型改成string，或者把后端返回的JSON里的value转成数字，保持类型一致。

另外你之前尝试加selected属性没用是因为Vue是通过v-model来控制选中状态的，手动设置的selected会被v-model的状态覆盖，所以必须通过匹配v-model的值和选项value来实现默认选中。

备注：内容来源于stack exchange，提问作者Kim Andersen