Select 选择器 el-option 回显错误 value

最新推荐文章于 2024-05-16 14:57:16 发布
最新推荐文章于 2024-05-16 14:57:16 发布
阅读量1.3k 收藏 1
点赞数 3
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35930739/article/details/136055903
版权
文章讲述了在Vue项目中，使用el-select组件时遇到的v-model值类型问题，通过将表单中bookId字段类型从string改为integer，以适应el-option的value属性类型（item.id为integer），解决了表单验证时的错误。
摘要由CSDN通过智能技术生成

离谱 回显的内容不是 label 而是 value 的值

返回官方看说明：

v-model的值为当前被选中的el-option的 value 属性值

value / v-model 绑定值有3种类型 boolean / string / number 

根据自身代码猜测是：tableData.bookId 与 item.id 类型不一致导致

<el-form-item label="父级书签">
            <el-select v-model="tableData.bookId" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.hl"
                  :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

我将后端的 bookId 字段类型改为 Integer 与  :value="item.id 字段类型保持一致解决此问题

长满头发的程序猿
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
el-option显示value而不是lable的问题
Cc
04-21 1949
el-option显示value而不是lable的问题，后台返回数字前端想要显示文字
关于解决ElementUi中select框在页面滚动时el-option超出元素区域的问题+ cascader滚动超出问题
01-25
然而，在实际使用过程中，可能会遇到一些问题，比如Select下拉选项（el-option）在页面滚动时超出元素区域，以及Cascader级联选择器滚动超出其容器。这两个问题都会影响用户体验。本文将详细探讨这两个问题的原因及...
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue elementui 选择框反显时显示key不显示value
weixin_45682701的博客
11-01 653
选择框反显时显示key不显示value问题解决原因 问题 解决 如果不是循环的话 在value前面加上冒号用来确定值的类型 如果是循环列表拿不确定的值 因为对比了一下后端传的值是布尔值 而我原本写死的是字符串 所以匹配不到 改一下type类型就可以了 原因 后端返显的值value数字类型的,我写死的是字符串类型，所以匹配不到值~ ...
Vue进阶（幺捌幺）：elementUI 中 select 多选，数据回显错误的问题解决方法_element select多选第一次回显不上,点击别的输入框回显正常(2)
最新发布
2301_82241847的博客
05-16 366
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】分享一些前端面试题以及学习路线给大家题以及学习路线给大家**[外链图片转存中…(img-BbpWTdhg-1715842613050)]
一个开源的Vue大屏数据展示组件库(1)
2401_84447233的博客
05-01 375
数据尚未加载完成时，可以显示Loading效果，增强用户体验。Loading…边框均由SVG元素绘制，体积轻量不失真，使用极为方便。你可以使用装饰去点缀你的页面，以增强视觉效果，与边框组件相同，他们也是用SVG元素绘制的。66%基本示例设置一个中心点，若干飞线点，即可得到动态飞线图，组件提供的dev模式可以帮你快速配置飞线点位置。增强版飞线图。
【Vue】el-select 数据回显，只显示value不显示lable：
SunPeng的博客
07-18 4679
【Vue】el-select 数据回显，只显示value不显示lable：，数据类型不一致导致的，可以typeof判断数据类型（其中一个为数字Number，另一个为字符串String）， 需求： 两个不同页面，其中一个页面的select改变会引起另一个页面的select的改变（其中获取到的是id） 问题： 另一个页面获取展示的是id，而不是想要的对应文字 解决： JSON.stringify() JSON.parse()...
el-select下拉框只回显value不回显label的原因以及解决方法
m0_63026408的博客
11-16 5271
3：如果 value类型是正确的，下拉框数据也有，还是返显的value，最后可以试一下在el-select加一个change方法中使用this.$forceUpdate()方法如下。el-select的采用的是map的key value结构，因此只显示value而不显示label的原因是，value的类型不正确，将value转换成对应的类型即可。2：如果转换了正确的类型还是返显value而不是label，那么有可能时因为下拉框的数据没有请求出来，因此没有返显相对应的label，
解决el-select回显value，不显示lable，以及之后不能操作的问题
qq_45779588的博客
04-11 491
el-select v-model="addData.classifyIdsList" placeholder="请选择" multiple @change="$forceUpdate()">不能操作 加@change="$forceUpdate()"
el-select回显数据，解决el-select回显异常 显示option选项的value 而不是显示label
林中明月间丶
04-16 1234
废话：今天在使用el-select回显数据的时候 出现回显option选项的value 而不是显示label的问题。以为是渲染的问题，试了很多方法 入 this.$set() this.$forceUpdate()等等都没有解决。
element-ui 远程搜索组件el-select在项目中组件化的实现代码
10-15
Element-UI的`el-select`组件是用于创建下拉选择框的，它提供了丰富的功能，包括远程搜索（remote search）。远程搜索在大型数据集或动态获取数据的情况下非常有用，因为它只在用户输入时向服务器请求数据，提高了...
详解关于element级联选择器数据回显问题
10-17
级联选择器的属性配置包括 `placeholder`、`:props`、`:options`、`filterable`、`change-on-select` 和 `v-model`。其中，`:props` 指定了每个选项的 `value`、`label` 和子级 `children` 的键名，`v-model` 用于...
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
10-18
主要介绍了vue2.0 element-ui中的el-select选择器无法显示选中的内容,在文中小编使用的是element-ui V2.2.3。具体解决方法及示例代码大家参考下本
Form表单中radio，option不回显问题
weixin_45540182的博客
11-04 435
value="0"是Vue中的一种简写，它相当于v-bind:value=“0”，它的作用是将一个属性的值绑定到一个表达式上，这里的表达式是0，也就是一个数字。属性是直接设置为一个字符串的。Vue中有很多这样的简写，它们可以让我们的代码更简洁，更易读。v-slot可以简写为#，它用于绑定插槽的名称。数据类型不匹配，例如"1"与1是无法匹配绑定的。v-bind可以简写为:，它用于绑定属性的值。v-on可以简写为@，它用于绑定事件的监听器。属性是绑定到一个数字上的，后者的。这两个代码的区别是，前者的。
elementUI的el-select 修改时 默认值不显示问题
这里是迷阵的博客耶
06-23 4881
显示为数字，不能正确显示值 原因:el-option选框需要的value属性是String类型的,可以利用row这个一行数据,拿到el-option选框的value将其转换为String类型就可以了
element-ui的el-select总是不显示label，而是显示value
chpswg的专栏
09-08 937
element-ui的el-select总是不显示label，而是显示value， 这个问题改了无数次，结果发现是没有为el-option赋值label,
解决el-select回显异常 显示option选项的value 而不是显示label
weixin_40745445的博客
08-19 1549
value=“item.userId” 改为 :value=“item.iduserId+‘’”（转换成字符串）option中:value=“item.userId” 选项id是数字类型。form中v-model="form.userId"是字符串类型。回显的value和选项value类型不同。
element-ui表单验证，value一直为undefined的一种可能解决方案
热门推荐
HermitSun的博客
04-18 1万+
有很多人遇到过这个问题，但是一般都是因为prop没写对，或者没有在data里声明；但我遇到的情况这两者都不是。代码如下： <template> <el-form :rules="rules"> <el-form-item prop="value"> <el-input v-model="form.value"/> &l...
el-select回显value值
06-13
要回显 `el-select` 组件的 `value` 值，有两种方法： 1. 使用 `v-model` 指令绑定 `value`，这样选中的值会自动更新到绑定的数据上，例如： ```html <el-select v-model="selectedValue" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` ```javascript data() { return { options: [ { value: 'option1', label: '选项一' }, { value: 'option2', label: '选项二' }, { value: 'option3', label: '选项三' } ], selectedValue: '' } } ``` 这样选中的值就会自动更新到 `selectedValue` 中，可以在其他地方使用 `selectedValue` 来获取选中的值。 2. 使用 `:value` 绑定 `value` 值，然后监听 `change` 事件，手动更新选中的值，例如： ```html <el-select :value="selectedValue" @change="handleChange" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-select> ``` ```javascript data() { return { options: [ { value: 'option1', label: '选项一' }, { value: 'option2', label: '选项二' }, { value: 'option3', label: '选项三' } ], selectedValue: '' } }, methods: { handleChange(value) { this.selectedValue = value } } ``` 这样选中的值会通过 `change` 事件传递到 `handleChange` 方法中，然后手动更新 `selectedValue`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值