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

已于 2024-02-04 08:54:09 修改
阅读量627 收藏 5
点赞数 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
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue下拉框回显并默认选中随机问题
10-18
主要介绍了Vue下拉框回显并默认选中随机问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
vue3中弹框中的el-select下拉组件显示value而不显示label
kanno的博客
10-20 2351
vue3中弹框中的el-select下拉组件显示value而不显示label
【vue2+element ui】添加修改共用表单的下拉框回显问题分析以及解决方案（附共用表单代码）
Ez4Sterben的博客
07-20 3903
本人前端水平不佳，本文分享在编写个人项目前端代码的时候遇到的回显问题的解决办法，仅供参考。
vue3中基于element-plus封装一个表格弹框组件，要求可以单选和多选table数据
最新发布
jieyucx的博客
05-23 1208
单选： 多选： 弹框表格组件代码 这里多啰嗦一句，我这里是自定义列，使用单选框的方式实现的 为什么要这样呢，因为我开始是使用多选加反选的方式实现单选，但这样存在一个bug，就是多选框的表头有个全选按钮，点击那个全选的时候会出现反选的问题。
【Vue】el-select 数据回显不显示名称，只显示value不显示lable 下拉框不显不lable
guochanof的专栏
08-15 1895
el-select 数据回显不显示名称，只显示value不显示lable 下拉框不显不lable
【Vue】el-select 数据回显，只显示value不显示lable：
SunPeng的博客
07-18 4693
【Vue】el-select 数据回显，只显示value不显示lable：，数据类型不一致导致的，可以typeof判断数据类型（其中一个为数字Number，另一个为字符串String）， 需求： 两个不同页面，其中一个页面的select改变会引起另一个页面的select的改变（其中获取到的是id） 问题： 另一个页面获取展示的是id，而不是想要的对应文字 解决： JSON.stringify() JSON.parse()...
vue+element 多选下拉框的传值及回显
Humor_L的博客
06-01 7476
给select下拉框添加多选属性multiple 1、多选下拉框传值：定义hostTypelist数组， 传值时： 2、多选下拉框回显 因为要回显，所以回显的格式与之前保持一致（要数组形式），在最后循环的时候不能用刚开始定义的hostTypelist数组去接收，此时能回显出个数，但是显示内容是重复的，仔细思考这儿 回显循环的到底是什么。最后要的是hostid。
el-select回显数据，解决el-select回显异常 显示option选项的value 而不是显示label
林中明月间丶
04-16 1406
废话：今天在使用el-select回显数据的时候 出现回显option选项的value 而不是显示label的问题。以为是渲染的问题，试了很多方法 入 this.$set() this.$forceUpdate()等等都没有解决。
解决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 下拉框是非常常用的一个组件，它可以让用户快速地选择某个选项。但是，在实际开发中，我们经常会遇到一些问题，例如如何获取选中后的值、如何...
vue-select 多选下拉列表
09-11
vue-select 多选下拉列表，建议用火狐或者谷歌浏览器打开，低版本IE对vue兼容性不好
vue+elementui日常小问题之下拉框数据回绑直接显示value而不显示lable
ZhouPPig的博客
12-07 1520
最近在开发一个erp项目，一个人开发，so经常会碰到一些大大小小的问题，以后所有问题就都写在这个里面叭！项目前端用的是vue+elementui，后端用的springboot+mybatisplus。已经开发了一段时间，碰到的这个问题就是使用后台返回数据（id）绑定el-select的value的时候直接给我显示数字在网上搜索了该问题的解决方案试过都不行后面发现很简单：因为你下拉框绑定的时候可能value绑的是整形（int），而后台返回的是String（例如：‘1’），所以系统默认是直接显示你后台返回的字符
vue 下拉选是多选的，并且回显
goodStudy_H的博客
02-28 8099
下拉选最重要的就是：下拉选的所有选项放在一个变量，选中的选项放在一个变量。 先加载所有选项的数据，再加载选中选项的数据，并且要保证select下拉的ID和v-model里边的id保持一致。 第一、加载的顺序，应该先加载下拉框要选择的数据，然后在通过编辑查询数据后回显。 第二、要保证select下拉的ID和v-model里边的id保持一致。 第三、elementUI就会自动的将数据回显了。 ...
下拉回显问题案例大全
weixin_52236586的博客
01-25 653
【代码】下拉回显问题案例大全。
关于el-select值的回显问题 : 框内显示label值还是value值
热门推荐
wlong
11-11 1万+
今天写前端页面的时候突然遇见了这么个问题： 我想实现一个下拉框，于是使用了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项目实现el-cascader下拉多选回显
weixin_65982275的博客
07-31 1373
【代码】vue项目实现el-cascader下拉多选回显。
vue修改编辑弹窗下拉数据回显
agua001的博客
04-27 8339
1、效果如图： <a-form-item label="测站类型"> <a-select allowClear v-decorator="[ 'typeId', { rules: [{ required: true, message: '请选择测站类型' }] }, ]" placeholder="请选择测站类型" > <a-select-option v-for="(item, index)
vue下拉框模糊搜索后回显
05-13
在Vue中，实现下拉框模糊搜索后回显的一般步骤如下： 1. 在Vue中定义一个data中的数组，用于存储下拉框的选项数据。 2. 在Vue中定义一个搜索框的数据，用于存储用户输入的搜索关键字。 3. 在Vue中定义一个computed属性，用于根据搜索框的关键字实时筛选出符合条件的下拉框选项。 4. 在HTML中使用v-for指令循环渲染筛选后的下拉框选项。 5. 在HTML中使用v-model指令绑定下拉框的选项值到Vue实例中的一个变量，从而实现选项回显。 具体实现可参考以下代码示例： ```html <template> <div> <input type="text" v-model="search" placeholder="搜索选项" /> <select v-model="selectedOption"> <option v-for="option in filteredOptions" :value="option.id">{{ option.name }}</option> </select> </div> </template> <script> export default { data() { return { options: [ { id: 1, name: '选项一' }, { id: 2, name: '选项二' }, { id: 3, name: '选项三' }, { id: 4, name: '选项四' }, ], search: '', selectedOption: null, }; }, computed: { filteredOptions() { return this.options.filter((option) => { return option.name.includes(this.search); }); }, }, }; </script> ``` 在上述代码中，我们定义了一个data中的数组options，用于存储下拉框的选项数据；定义了一个search变量，用于存储用户输入的搜索关键字；定义了一个selectedOption变量，用于存储下拉框的选项值。然后，我们使用computed属性filteredOptions，根据用户输入的搜索关键字实时筛选出符合条件的下拉框选项。在HTML中，我们使用v-for指令循环渲染筛选后的下拉框选项，并使用v-model指令绑定选项值到selectedOption变量上，从而实现选项回显。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值