【vue】下拉框回显的是数字却不是中文

hicfly

已于 2022-11-26 20:55:30 修改

阅读量2k

点赞数 3

文章标签： elementui vue.js 前端

于 2022-06-01 09:01:36 首次发布

本文链接：https://blog.csdn.net/cflydk/article/details/125077074

版权

在前端开发中，遇到一个问题：新建时数据显示为中文，但编辑时回显为数字。经过排查发现是v-model绑定的值类型与select选项value的类型不匹配。解决方法是确保v-model的变量`manageUserId`类型与选项`value`类型一致，这里将Number类型转换为String类型。总结来说，v-model绑定的变量值类型应与组件value值类型保持一致，以避免类似问题。

摘要由CSDN通过智能技术生成

场景：前端新增的时候显示为中文，但点修改的时候，回显的却是数字，

几经查找，最后发现是v-model的值类型与value值的类型不一致导致的。
解决办法：

 <el-form-item label="用户" prop="manageUserId">
         <el-select v-model="form.manageUserId">
            <el-option
              v-for="dict in fgyLeaderOptions"
              :key="String(dict.id)"
              :label="dict.nickname"
              :value="String(dict.id)"
            />
          </el-select>
  </el-form-item>

manageUserId是String类型，而返回的id是Number类型，所以将Number类型的id转换为String类型就好了。

结论：v-model的变量值类型要与value值类型保持一致。