el-select 和el-radio中 value类型不一致label不能选中

原创已于 2024-01-18 14:31:25 修改 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

创作源自于MyFreeIT

文章标签：

#vue.js #elementui #前端

于 2024-01-18 10:22:05 首次发布

前端专栏收录该内容

34 篇文章

订阅专栏

本文讨论了在使用Vue开发时，如何处理通过RestApi获取到的数据库值由number变为string类型，以及在el-select和el-radio组件中进行parseInt转换的问题，以确保正确匹配和存储数值数据。

数据结构和数据库都是number类型，但是经过Rest Api获得后，value变成了string 类型，需要通过parseInt转化。

MySQL

be_carbon_action int

vue code

carbonAction?: number

<el-select v-model="form.carbonAction" placeholder="Select carbon" >

<el-option 
v-for='carbon in dic_carbon_action' 
:label="carbon.nameEnglish" 
:key="carbon.value" 
:value="parseInt(carbon.value!)" />

</el-select>

el-radio 通过Label 匹配默认值，所以需要类型转换

<el-form-item label="In Active" prop="inActive">
<el-radio-group v-model="form.inActive">
<el-radio 

:label="parseInt(type.value!)" 
:key="type.value" 
v-for="type in dic_active_email" >

      {{type.nameEnglish}}

</el-radio>
</el-form-item>