vue动态选取下拉框时回显为value

已于 2024-02-04 08:54:09 修改
阅读量687 收藏 6
点赞数 9
分类专栏： vue 文章标签： vue
于 2024-02-02 11:18:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sublime_k/article/details/135989850
版权
本文讨论了在Vue应用中，下拉框动态获取数据时遇到的问题，即回显的是value而非标签值。解决方法包括确保数据库中对应字段为char类型，实体类使用String，并在Vue页面中正确配置相关属性。作者提醒读者点赞支持。
摘要由CSDN通过智能技术生成
  • 【版权所有，文章允许转载，但须以链接方式注明源地址，否则追究法律责任】
  • 【创作不易，点个赞就是对我最大的支持】

前言

仅作为学习笔记，供大家参考
总结的不错的话，记得点赞收藏关注哦！



目录

问题描述


vue中下拉框动态获取时，回显的是vlue而不是标签值



如图：

在这里插入图片描述


解决方法


1.数据库中应定义为char类型，长度1

2.实体类应为String

3.vue页面中三个属性缺一不可如图：


在这里插入图片描述

创作不易，点个赞就是对我最大的支持~

​

公众号：程序员温眉

在这里插入图片描述
CSDN：程序员温眉

每天进步一点点的程序员

程序员温眉
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue数据字典下拉框，要回显下拉列表中没有的值？
m0_50441807的博客
03-30 1303
由于自定义指令中的update钩子函数中无法知道接口的数据什么时候才返回，所以需要循环调用updateDom函数，里面是setTimeout，直到接口返回值的时候，才终止循环调用；思路：下拉框的回显，是根据下拉列表数组来回显的，假设下拉列表中没有该值，则无法回显；那么我们把不能回显的值也放到数组里面，只是显示下拉列表的时候隐藏，就可以达到回显的作用了；数据字典中有个enable字段，用于字典的启用和停用；// 这里写死200毫秒，实际后端响应是不确定的。：实际上拿到的是指令所在组件的实例对象；
Vue下拉框回显并默认选中随机问题
10-18
Vue下拉框回显并默认选中随机问题通常指的是在使用Vue.js框架和ElementUI组件库开发前端页面时，遇到下拉框组件在数据回显时出现选择状态随机的问题。这一问题可能会导致用户体验下降，因为下拉框中的选项在多次刷新...
vue3中弹框中的el-select下拉组件显示value而不显示label
kanno的博客
10-20 2452
vue3中弹框中的el-select下拉组件显示value而不显示label
vue+element 多选下拉框的传值及回显
Humor_L的博客
06-01 7530
给select下拉框添加多选属性multiple 1、多选下拉框传值：定义hostTypelist数组， 传值时： 2、多选下拉框回显 因为要回显，所以回显的格式与之前保持一致（要数组形式），在最后循环的时候不能用刚开始定义的hostTypelist数组去接收，此时能回显出个数，但是显示内容是重复的，仔细思考这儿 回显循环的到底是什么。最后要的是hostid。
【vue2+element ui】添加修改共用表单的下拉框回显问题分析以及解决方案（附共用表单代码）
Ez4Sterben的博客
07-20 3995
本人前端水平不佳，本文分享在编写个人项目前端代码的时候遇到的回显问题的解决办法，仅供参考。
【Vue】el-select 数据回显不显示名称，只显示value不显示lable 下拉框不显不lable
guochanof的专栏
08-15 1976
el-select 数据回显不显示名称，只显示value不显示lable 下拉框不显不lable
【Vue】el-select 数据回显，只显示value不显示lable：
SunPeng的博客
07-18 4769
【Vue】el-select 数据回显，只显示value不显示lable：，数据类型不一致导致的，可以typeof判断数据类型（其中一个为数字Number，另一个为字符串String）， 需求： 两个不同页面，其中一个页面的select改变会引起另一个页面的select的改变（其中获取到的是id） 问题： 另一个页面获取展示的是id，而不是想要的对应文字 解决： JSON.stringify() JSON.parse()...
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
解决layui 三级联动下拉框更新时回显的问题
12-10
最近接触layui，比较简洁...这里面有个问题就是 选择的时候 如果 请选择 的value 是“” 空字符串，当选择从河北省变到请选择时不会触发这个监听事件 [removed] layui.use(['form'],function(){ var form = layui.fo
浅谈Vue Element中Select下拉框选取值的问题
08-27
Vue Element 中 Select 下拉框选取值的问题 在 Vue Element 中，Select 下拉框是非常常用的一个组件，它可以让用户快速地选择某个选项。但是，在实际开发中，我们经常会遇到一些问题，例如如何获取选中后的值、如何...
下拉回显问题案例大全
weixin_52236586的博客
01-25 691
【代码】下拉回显问题案例大全。
el-select回显数据，解决el-select回显异常 显示option选项的value 而不是显示label
最新发布
林中明月间丶
04-16 1787
废话：今天在使用el-select回显数据的时候 出现回显option选项的value 而不是显示label的问题。以为是渲染的问题，试了很多方法 入 this.$set() this.$forceUpdate()等等都没有解决。
vue+elementui日常小问题之下拉框数据回绑直接显示value而不显示lable
ZhouPPig的博客
12-07 1542
最近在开发一个erp项目，一个人开发，so经常会碰到一些大大小小的问题，以后所有问题就都写在这个里面叭！项目前端用的是vue+elementui，后端用的springboot+mybatisplus。已经开发了一段时间，碰到的这个问题就是使用后台返回数据（id）绑定el-select的value的时候直接给我显示数字在网上搜索了该问题的解决方案试过都不行后面发现很简单：因为你下拉框绑定的时候可能value绑的是整形（int），而后台返回的是String（例如：‘1’），所以系统默认是直接显示你后台返回的字符
vue 下拉选是多选的，并且回显
goodStudy_H的博客
02-28 8153
下拉选最重要的就是：下拉选的所有选项放在一个变量，选中的选项放在一个变量。 先加载所有选项的数据，再加载选中选项的数据，并且要保证select下拉的ID和v-model里边的id保持一致。 第一、加载的顺序，应该先加载下拉框要选择的数据，然后在通过编辑查询数据后回显。 第二、要保证select下拉的ID和v-model里边的id保持一致。 第三、elementUI就会自动的将数据回显了。 ...
vue下拉框值改变_element-ui可输入下拉框改变输入值对应的value
weixin_32047681的博客
12-31 2502
Documentplaceholder="请选择文章标签" @change="changeValue($event)">var vm = new Vue({el: "#app",data: {options: [{value: '{name:"HTML",value:"HTML"}',label: 'HTML'}, {value: '{name:"CSS",value:"CSS"}',lab...
jquery取值，赋值，以及下拉框获取选中value值
铁柱的博客
11-27 6406
太长时间不用基础的jquery语法，该忘的，不该忘的，都忘的差不多了。这里重新拾起一些简单的jquery知识。一、jquery获取元素的值（1）通过name属性获取元素的value值//假如是获取input文本框的value值 $("input[name='name']").val();（2）通过id获取元素的value值//product是id的值 //获取值用val(),此处和js的value
关于el-select值的回显问题 : 框内显示label值还是value值
热门推荐
wlong
11-11 2万+
今天写前端页面的时候突然遇见了这么个问题： 我想实现一个下拉框，于是使用了el-select标签 <el-col :span="12"> <el-form-item label="中午吃啥" prop="lunch"> <el-select v-model="wlong.lunch" placeholder="中午吃啥" size="small"> <el-option v-for="(t...
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）
wocwin的博客
02-28 1万+
vue+ElementUI el-select实现下拉列表分页的功能（下拉分页组件---新增多选功能及默认值回显示例）
VUE(4) : vue-element-admin[4] : 多选下拉框及回显
Lxinccode的博客
08-05 3673
参考 : 【vue】下拉框回显问题（显示数字，实际应该显示中文）_易小花的博客-CSDN博客_vue下拉框回显 vue+element 多选下拉框的传值及回显_Humor_L的博客-CSDN博客_vue多选下拉框回显数据 静态下拉框 动态下拉框 回显 push的字段和标签[:key="item.key"]的key保持一致即可回显...
vue下拉框模糊搜索后回显
05-13
在Vue中，实现下拉框模糊搜索后回显的一般步骤如下： 1. 在Vue中定义一个data中的数组，用于存储下拉框的选项数据。 2. 在Vue中定义一个搜索框的数据，用于存储用户输入的搜索关键字。 3. 在Vue中定义一个computed...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值