[vue]html标签select会改变value类型??都变成string了?

作者站长头像
站长
· 阅读数 15

采用vue写法利用select取第二个值作为valuemodelValue类型为number|string

const data:[number|string,number|string][]= [[1, '肖明'],['测试', 1],["id", 5]],

  <select :value="modelValue" @change="selectHandler($event)">
      <option v-for="(item, index) in data" :key="item[0]" :value="item[1]">
                {{ item[0] }}
       </option>
   </select>

js

const selectHandler = (e: Event) => {
    const val = (e.target as HTMLSelectElement).value //问题:不能获取到正确类型?
    //emits('update:modelValue', val)
}



一楼大哥详解可以!!
const modelValueRef = ref<number | string | undefined>()

 <select v-model="modelValueRef">
            <option v-for="(item, index) in enumStrsList" :key="index" :value="item[1]">
                {{ item[0] }}
            </option>
</select>
回复
1个回答
avatar
test
2024-07-18

你用 event.target.value 取到的当然是字符。因为 Vue 会尽量保持 HTML 兼容性,而 DOM 里的属性都是字符类型。

这种时候直接用 v-model 配合 this.modelValue 就好。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容