18910140161

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

顺晟科技

2022-10-16 07:23:42

32

采用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>

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

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

相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航