vue中select标签会导致value值转换为字符串

在Vue中，当使用<select>标签并为value绑定一个可选型（例如number|string）时，可能会遇到value值被转换为字符串的问题。

这是因为Vue会优先保持与HTML的兼容性，而DOM中的属性默认都是字符串类型。因此，通过event.target.value获取到的值也被强制转换为字符串。

为了解决此问题，可以使用v-model结合自定义的modelValue属性：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

<select v-model="modelValueRef">
  <option v-for="(item, index) in enumStrsList" :key="index" :value="item[1]">
    {{ item[0] }}
  </option>
</select>

此处，modelValueRef是一个响应式Ref对象，它可以保存number或string类型的值。通过v-model绑定，select的value将动态更新modelValueRef的值，并保持正确的类型。

立即学习“前端免费学习笔记（深入）”；