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

news2025/2/3 6:57:44

初始化参数

return {
      fields: [
        {"title":"景区","id":0},
        {"title":"酒店","id":1}
      ],
      evaluates: [
        {"title":"好评","id":0},
        {"title":"中评","id":1},
        {"title":"差评","id":2}
      ],
}

<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+''"

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/762241.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux】- Linux 磁盘分区、挂载

Linux 磁盘分区、挂载 1.1 Linux 分区1.2 硬盘说明1.3 磁盘情况查询 1.1 Linux 分区 原理介绍 Linux 来说无论有几个分区&#xff0c;分给哪一目录使用&#xff0c;它归根结底就只有一个根目录&#xff0c;一个独立且唯一的文件结构 , Linux 中每个分区都是用来组成整个文件系…

SAP AES encrypt

加密算法简介: 加密技术通常分为两大类:"对称式"和"非对称式"。 对称性加密算法&#xff1a;对称式加密就是加密和解密使用同一个密钥。信息接收双方都需事先知道密匙和加解密算法且其密匙是相同的&#xff0c;之后便是对数据进行加解密了。对称加密算法…

【近场社交项目】数据库系统期末设计——逻辑设计部分

【近场社交项目】数据库系统期末设计——逻辑设计部分&#x1f60e; 前言&#x1f64c;3.2逻辑设计1、各个表的二维表&#xff1a;2. 用户信息ER图转换为逻辑和关系模型&#xff1a;3. 用户进行下单业务的ER图转换为逻辑关系模型4. 用户充值会员业务ER图转换为逻辑关系模型5. 用…

springboot实现全局异常捕获

导言&#xff1a; 为什么要做异常处理&#xff1a; 原因有三&#xff1a; 1、将系统产生的全部异常统一捕获处理。 2、自定义异常需要由全局异常来捕获。 3、JSR303规范的validator参数校验器、参数校验不通过、本身无法使用try…catch 其实对于前后端分离的项目做异常处理…

ROS:导航功能详解

目录 一、导航简介1.1导航概念1.2导航作用1.3导航模块简介1.3.1全局地图1.3.2自身定位1.3.3路径规划1.3.4运动控制1.3.5环境感知 1.4导航条件1.4.1硬件1.4.2软件 二、坐标系2.1坐标系简介2.2坐标系特点2.3坐标系变换 三、导航功能实现3.1SLAM建图3.1.1gmapping简介3.1.2gmappin…

【VUE】解决VU2项目图片视频加载缓慢/首屏加载白屏的问题

1 问题描述 前端项目中&#xff0c;有时候会出现图片视频加载缓慢、首屏加载白屏的问题 之前写了一篇在VU3项目中的解决方案&#xff0c; 现在讲一下在 Vue2 项目中的解决方法&#xff0c;方法思路都差不多&#xff0c;在代码示例上会有一些小差别 2 原因分析 通常是由以下原因…

辅助驾驶功能开发-功能规范篇(22)-6-L2级辅助驾驶方案功能规范

1.3.6 ELK 系统功能定义 ELK全称Emergency Lane Keeping&#xff0c;即紧急车道保持。当车辆与道路边界护栏&#xff08;包含隔离带护栏、路锥、水马&#xff09; 有碰撞危险或当车辆正偏出道路边沿且存在“对向来车”或“后向来车”与本车有碰撞风险时&#xff0c;通过给与转向…

Redis源码篇- SDS

Redis对于String类型&#xff0c;底层使用的是SDS&#xff08;简单动态字符串&#xff09;&#xff0c;而不是常规的C语言的字符数组 。 通常在C中&#xff0c;定义一个字符串&#xff0c;方式是通过字符数组表示&#xff0c;同时结尾使用/0表示结束&#xff1a;char [] &quo…

C语言 与 C++ 通讯录对比实现(附带源码)

目录 1.通讯录的基本框架 C语言版 C版 2.增加联系人 C语言版 C版 3.删除联系人 C语言版 C版 4.查找与打印联系人 C语言版 C版 5.修改联系人 C语言版 C版 6.排序联系人 C语言版 C版 7.其他 8.总结 本文章将对C语言、C版本的通讯录进行对比实现。其中C版本引入大量C语言没有的特性…

第 5 章 Spark Shuffle 解析

第 5 章 Spark Shuffle 解析 5.1 Shuffle 的核心要点1. 数据分区&#xff1a;2.数据传输&#xff1a;3. 数据排序&#xff1a;4.数据聚合&#xff1a;5. 数据重分发&#xff1a;6.数据持久化&#xff1a;5.1.1 ShuffleMapStage 与 ResultStage 5.2 HashShuffle 解析5.2.1 未优化…

KUKA机器人_外部安全条件不满足时,如何操作机器人的方法

KUKA机器人_外部安全条件不满足时&#xff0c;如何操作机器人的方法 如果大家在做项目时&#xff0c;控制系统尚未完成&#xff0c;外部紧急停止等安全条件尚未满足时&#xff0c;但是此时想操作或移动机器人&#xff0c;有办法吗&#xff1f; 答案是有。 具体的方法可参考以…

驾驶证——科目一笔记(二)

知识点1&#xff1a;通行规定 有加速&#xff08;x&#xff09; 各种礼让&#xff08;√&#xff09; 减速慢行、减速靠右、减速或停车、停车避让&#xff08;√&#xff09; 不用减速慢行、无需减速、不必减速&#xff08;x&#xff09; 不得&#xff08;√&#xff09; …

【文档模板】产品故障分析报告

今天和大家分享产品故障分析报告的文档模板。产品故障分析报告是一份文件&#xff0c;通常由技术团队、工程师或相关专业人员编写&#xff0c;用于详细描述和分析出现在系统、设备、产品或服务中的故障原因和根本原因。这些报告旨在对故障进行系统性的研究&#xff0c;以便团队…

Windows沙盒的安装与配置

沙盒安装 1、打开控制面板 2、选择程序与功能 3、勾选Windows 沙盒&#xff0c;然后点击确定&#xff0c;等待安装完成即可。 沙盒配置 Windows 沙盒支持简单的配置文件&#xff0c;这些文件为沙盒提供最少的自定义参数集。 此功能可与 Windows 10 内部版本 18342 或 Windows…

数据库管理-第九十二期 一周故障汇总(20230717)

第九十二期 一周故障汇总&#xff08;20230717&#xff09; 距离上一篇已经过了整整一周了&#xff0c;平时我虽然不是生产队的驴&#xff0c;但是一周一篇以上的数量还是维持了一段时间了。为啥上周只写了一篇&#xff0c;因为各种故障、各种保障、各种割接忙了整整一周&…

数据分析师:解读数据背后的故事

数据在当今信息时代中扮演着至关重要的角色&#xff0c;而数据分析师则是解读和发掘数据中隐藏信息的关键人物。作为数据分析师&#xff0c;他们运用统计学、机器学习和数据可视化等技术手段&#xff0c;从海量的数据中提取出有价值的信息和洞察&#xff0c;并将其转化为可供决…

大数据学习02-Hadoop分布式集群部署

操作系统&#xff1a;centos7 软件环境&#xff1a;jdk8、hadoop-2.8.5 一、创建虚拟机 1.下载VMware,建议支持正版 2.安装到Widows目录下任意位置即可&#xff0c;安装目录自定义。打开VMware&#xff0c;界面如下&#xff1a; 3.创建虚拟机 创建虚拟机—>选择自定义 …

kafka消息队列最常用的两种模式,以及应用场景

目录 一、发布-订阅模式 二、点对点模式 三、应用场景 一、发布-订阅模式 发布-订阅模式是最常见的消息传递模式&#xff0c;其中消息发布者将消息发送到一个或多个主题&#xff08;Topic&#xff09;&#xff0c;而订阅者可以选择订阅一个或多个主题来接收消息。每个订阅者…

在嵌入式系统开发培训中常用的数据库有哪些种?

数据库是一种储存和管理、组织数据的仓库&#xff0c;在嵌入式开发当中起到至关重要的作用。一个在嵌入式培训中&#xff0c;我们可学习使用的数据库有多种&#xff0c;每种数据库都会呈现出不同的一面&#xff0c;那么我们在嵌入式系统开发培训中可用到的数据库都有哪几种&…

JQuery(二):DOM操作、动画、遍历、事件绑定

1.DOM操作 1.1内容操作 html(): 获取/设置元素的标签体内容 <a><font>内容</font></a> --> <font>内容</font>text(): 获取/设置元素的标签体纯文本内容 <a><font>内容</font></a> --> 内容val()&am…