element-ui select数据回显显示数字的问题 el-select校验失效出现阿拉伯数字问题

初始化参数

javascript 复制代码
return {
      fields: [
        {"title":"景区","id":0},
        {"title":"酒店","id":1}
      ],
      evaluates: [
        {"title":"好评","id":0},
        {"title":"中评","id":1},
        {"title":"差评","id":2}
      ],
}
html 复制代码
<el-form-item label="评价" prop="appraise">
          <el-select v-model="form.appraise" placeholder="请选择">
            <el-option
              v-for="evaluate in evaluates"
              :key="evaluate.id"
              :label="evaluate.title"
              :value="evaluate.id"
              clearable
            >
              {{ evaluate.title }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类" prop="classification">
          <el-select v-model="form.classification"  placeholder="请选择">
            <el-option
              v-for="item in fields"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              clearable
            >
              {{ item.title }}
            </el-option>
          </el-select>
        </el-form-item>

后端传送数据给前端后,下拉框回显结果为数字!

最近遇到个问题后端返回结果后.前端双向绑定回显结果为数字.分析原因后发现是数据类型不一致导致回显异常

解决方案

把option的value转为字符类型即可

|---|---------------------------------|
| 1 | :value="evaluate.id+''" |

html 复制代码
<el-form-item label="评价" prop="appraise">
          <el-select v-model="form.appraise" placeholder="请选择">
            <el-option
              v-for="evaluate in evaluates"
              :key="evaluate.id"
              :label="evaluate.title"
              :value="evaluate.id+''"
              clearable
            >
              {{ evaluate.title }}
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类" prop="classification">
          <el-select v-model="form.classification"  placeholder="请选择">
            <el-option
              v-for="item in fields"
              :key="item.id"
              :label="item.title"
              :value="item.id+''"
              clearable
            >
              {{ item.title }}
            </el-option>
          </el-select>
        </el-form-item>
相关推荐
cypking1 小时前
解决 axios get请求瞎转义问题
vue.js
向阳2561 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特1 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~1 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习
莫循瑾木1 小时前
Vue3 Composition API 完全指南
前端·vue.js·前端工程化
初辰ge1 小时前
后端说“基本增删改查都写好了,就差切图仔对接口了!”——我一怒之下撸了个代码生成器
前端·vue.js
清风絮柳2 小时前
52.个人健康管理系统小程序(基于springboot&vue)
vue.js·spring boot·毕业设计·前后端分离·健康管理系统·个人健康管理系统·个人健康管理小程序
6武73 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
千鼎数字孪生-可视化3 小时前
3D模型给可视化大屏带来了哪些创新,都涉及到哪些技术栈。
ui·3d·信息可视化·数据分析
goto_w3 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos