首页 > 文章列表 > Vue中使用Select标签时,如何避免value值被强制转换为字符串?

Vue中使用Select标签时,如何避免value值被强制转换为字符串?

499 2024-12-29

Vue中使用Select标签时,如何避免value值被强制转换为字符串?

Vue中Select标签会导致Value值转换为字符串

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

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

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

<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的值,并保持正确的类型。

来源:1730249697