vue + element 使用select时，使用v-model绑定数据时显示的不是labal值的问题

最新推荐文章于 2022-07-18 16:41:18 发布
最新推荐文章于 2022-07-18 16:41:18 发布
阅读量876 收藏 1
点赞数
分类专栏： vue.js 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41855396/article/details/107080887
版权

在做订单修改的时候，使用v-model绑定select的默认选中数据时，出现显示数字的问题；如下图：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
刚开始还以为我有什么参数没有写的时候，还各种百度，还找了朋友看，最后才发现，原来是v-model的数据类型需要与value的数据类型一样，才会显示绑定的labal数值；
在这里插入图片描述
最后的效果图：
在这里插入图片描述
哎！花时间买个教训了··························

Giovanna_1024
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 视图与数据不统一问题
qq_41629522的博客
07-21 621
这里记录的是 vue视图与data中数据不一致的 问题希望可以帮到你，上代码。 做的是一个选择框在后端有数据的情况下复现的功能 <Select size="large" style="margin-bottom:10px;" class="common-select-multiple" filterable v-model="joinPerson[0].userId"
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
10-17
在Vue.js中，`v-model`指令是实现数据双向绑定的关键，它允许开发者轻松地在视图和模型之间同步数据。在表单控件如输入框、文本域、单选按钮、复选框等元素上使用`v-model`，可以实现实时更新数据，极大地简化了前端...
select v-model绑定初始值时匹配的不是lable值而是value值
Iwantyou_baby的博客
11-05 730
解决办法：使v-model的值与value类型匹配
element select后台返回的数据类型和绑定的不一致导致显示不正常
qq_36778083的博客
03-31 844
<el-select disabled v-model="dataForm.irequesttype.toString()" filterable placeholder="受理方式" style="width:100%" > <el-option v-for="item in irequestty.
vue表格显示值不对
weixin_45682701的博客
07-18 432
问题一个页面我写了两个表格来回切换，但是这时候另一个表格值就不太对了，展示的和代码写的不一样。原因key值与另一个表格重复导致。解决将key设置为不一样的值。
vue 使用过滤器数据值和显示值不同原因
q15642的博客
12-19 2152
vue 检测input输入框值发生改变的事件中不会触发数据更新；  vue 检测input输入框值发生改变的事件中不会触发数据更新；  vue 检测input输入框值发生改变的事件中不会触发数据更新；  重要的事情说三次； 不会触发数据更新的原因是 由于js的限制，不能动态的检测对象/数组的删除或增加、变动.  so 如非必要，可以选择blur ，键盘事件去触发过滤。 如果一
vue自定v-model实现表单数据双向绑定问题
10-18
总的来说，Vue的`v-model`是实现数据双向绑定的关键，它简化了开发流程，提高了代码的可读性和可维护性。无论是基本的表单元素还是自定义组件，`v-model`都能帮助我们轻松地管理数据流。理解其工作原理对于深入学习...
详解vue中v-model和v-bind绑定数据的异同
10-14
总结起来，`v-bind` 和 `v-model` 在Vue中分别代表单向数据绑定和双向数据绑定，它们都用于建立组件和数据之间的桥梁。`v-bind` 更适合于静态属性的设置和更新，而 `v-model` 则适用于表单元素的交互，提供便捷的...
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
10-17
在这个示例中，使用了Vue.js的实例来定义数据模型，并通过v-model指令将input元素的值与数据模型中的msg属性绑定在一起。当用户在输入框中输入文本时，数据模型中的msg属性会相应地更新；而当msg属性的值发生变化时...
Vue + Element-ui的下拉框el-select获取额外参数详解
10-14
首先，`el-select`组件的`v-model`属性用于绑定选定的值，`@change`事件则在选中项发生变化时触发。默认情况下，`change`事件的回调函数接收到的参数是当前选中项的值。然而，如果我们需要在触发`change`事件时同时...
详解element-ui中el-select的默认选择项问题
12-29
直接绑定将option中的value值绑定给v-model <template> <div> <el v-model=query> <el v-for=item key=item.value value=item.value label=item.label></el> </el> </div> </template> [removed] export default{ data() { return { options: [{ value: '01',
Vue 2.0 v-model的用法
Caroline_LuoLuo的博客
11-28 675
       你可以用 v-model 指令在表单 &lt;input&gt;、&lt;textarea&gt; 及 &lt;select&gt; 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 ...
异步获取数据，v-model绑定的数据不能实时刷新（每次得到的是上次的结果）----解决办法
weixin_38345306的博客
05-18 1656
<font color="red">1.场景，</font> <font color="blue">在表单中通过一个input的改变,调后端接口，控制其他input的值的变化</font> <font color="blue">错误方式：</font>直接对后端返回的数据赋值 <font color="blue">正确方式：</font>使用$set实现
element-ui中el-select组件v-model绑定值为对象时的处理
乔的博客
12-20 1万+
编辑修改时，遇到数据回显的问题：显示文本，传参id。而v-model只有一个绑定变量。so… value-key value-key用于显示文本 传参
Vue.js——v-model结合select类型——2020.11.22
weixin_43402353的博客
11-22 580
一丶v-model：select 和checkbox一样，select也分单选和多选两种情况 单选：只能选中一个值 v-model绑定的是一个值 当我们选中option中的一个时，会将它对应的value赋值到mySelect中 多选：可以选中多个值 v-model绑定的是一个数组 当选中多个值时，就会将选中的option对应的value添加到数组mySelects中 二丶代码实战 <!--作者：key--> <!--浏览工具：Chrome--> <!--开发工具
element-ui的el-select总是不显示label，而是显示value
chpswg的专栏
09-08 958
element-ui的el-select总是不显示label，而是显示value， 这个问题改了无数次，结果发现是没有为el-option赋值label,
el-select 中v-model绑定值，数据回显只显示value，不显示label
热门推荐
ZMJ_QQ的博客
03-09 1万+
1、当v-model绑定的是一个值时 <el-select v-model="modelTree" filterable> <el-option v-for="item in nameList" :key="item.id" :label="item.title" :value="item.id"> </el-option> </el-select> 数据回显只显示value,不显示label，原因可能有以下几个： 1、option的数据中
element-ui的el-select 显示value对应的label值
CXX7788的博客
03-20 4369
v-model里传给后台的值即为 ：value 里的值 目前效果： (1)添加时： (2)添加完成后回写效果 期望效果： 完成过程： 首先再data中定义一个值 回写数据部分： 即可实现，如果是汉字转为数字改为String() 参考：https://segmentfault.com/a/1190000016737140?_ea...
vue+element ui的下拉框回显问题
weixin_44188501的博客
09-07 2947
最近在使用vue+element ui做下拉框回显的时候遇到了一个错误。下拉框列表正常显示，我要回显的话就要给绑定的model属性赋一个标签中对应的:value的值，但是奇怪的是下拉框没有回显而是显示了model属性的值。 一开始以为是我查询出来的数据不对劲，我打印出来没看出有什么问题。 百思不得其解。检查发现也不是vue生命周期的问题。 后来静下心仔细看了一下，发现我:value的值是字符串，而回显赋值给model属性的是数字。 把model绑定的属性值改成字符串后完美解决。 ...
【vue+elementui】el-radio单选框默认选中以及v-model绑定值问题
最新发布
07-13
在Vue中，通过给v-model绑定一个变量，然后将这个变量的值设置为el-radio的value属性值，即可实现默认选中。 例如，我们有以下的单选框组件： ```html <el-radio v-model="radioValue" :label="1">选项1</el-radio...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值