当下拉框数据value值一致，label值不一致，视图如何更新

于 2024-08-27 13:31:29 发布
阅读量130 收藏
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36619440/article/details/141600729
版权

这是我司的一个这样的需求，下拉框的数据由后端返回且可筛选，当数据库筛选没有数据时，后端会返回一个value为0，label为筛选条件的数据，如果多输入几次数据库没有的数据时就会出现这个问题，页面数据变更，但是下拉框的选择的视图数据并没有变化，因为在系统眼里，你的value并没有变化，也就不会触发视图更新，要处理此问题也很简答

在下拉框内在加一个绑定label值，v-model.sync=‘label变量’ 即可

qq_36619440
关注
vue---解决el-select显示value不显示label的问题
maidu_xbd的博客
01-03 1万+
产生左图的情况一般是由于下图红框中的参数类型不一致 可修改【dictInfoForm.type】类型与【item.value】一致 this.dictInfoForm.type=String(this.dictInfoForm.type); //转换为String类型 this.dictInfoForm.type=Number(this.dictInf...
Vue渲染问题
Smilelifeeveryday的博客
03-31 1189
vue element 渲染
基于Python的新能源汽车销售数据的分析与可视化系统
qq_52419575的博客
06-03 2150
随着人们环保意识的不断提高和政府的大力支持，新能源汽车市场逐渐壮大并引起了人们的广泛关注。为了分析新能源汽车的销售情况，本系统整体使用Django+Vue框架来链接前后端，以Python编程语言为基础，使用爬虫技术收集各大品牌新能源汽车销售数据，将销售数据存储在MySQL数据库，再使用ECharts技术对新能源汽车销售数据进行可视化展示。通过分析新能源汽车的车系销量排名、车系投诉信息、车系降价排行榜、汽车品牌数量分布、价格范围、具体车辆投诉信息、具体车辆投诉量走势以及具体车辆销量
机器学习模型可解释性进行到底 —— SHAP值理论（一）
热门推荐
素质云笔记
04-07 9万+
最近在系统性的学习AUTOML一些细节，本篇单纯从实现与解读的角度入手， 因为最近SHAP版本与之前的调用方式有蛮多差异，就从新版本出发，进行解读。 不会过多解读SHAP值理论部分，相关理论可参考： 关于SHAP值加速可参考以下几位大佬的文章： 文章目录1 介绍2 可解释图2.1 单样本特征影响图 1 介绍 文章可解释性机器学习_Feature Importance、Permutation Importance、SHAP 来看一下SHAP模型，是比较全能的模型可解释性的方法，既可作用于之前的全局解释，.
AI入门系列——数据分析
General_zy的博客
02-27 1581
人工智能（Artificial Intelligence，AI）之研究目的是通过探索智慧的实质，扩展人类智能——促使智能主体会听（语音识别、机器翻译等）、会看（图像识别、文字识别等）、会说（语音合成、人机对话等）、会思考（人机对弈、专家系统等）、会学习（知识表示，机器学习等）、会行动（机器人、自动驾驶汽车等）。一个经典的AI定义是：“ 智能主体可以理解数据及从中学习，并利用知识实现特定目标和任务的能力。”从技术层面来看，现在所说的人工智能技术基本上就是机器学习方面的（也就是，机器学习技术是入门AI的核心技术
Vue框架
记录学习历程
10-18 8万+
Vue 1、vue概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue -resource：通信，vuex：管理)或既有项目整合 官网 1.1、前端三板斧 HTML (结构) ：超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容 CSS (表现)
Struts2框架入门
weixin_44247784的博客
09-05 637
简单学一学struts2框架的使用，会持续更新ing Struts2
2021 HTML面试题（最新）不定时更新
一只蒻蒻的博客
02-02 4654
HTML面试题 DOCTYPE有什么作用？ DOCTYPE声明一般位于文档的第一行，它的作用主要是告诉浏览器以什么样的模式来解析文档。一般指定了之后会以标准模式来进行文档解析，否则就以兼容模式进行解析。 在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以向后兼容的方式来模拟老式浏览器的行为，以保证一些老的网站的正确访问。 标准模式（又称严格模式）与兼容模式（又称混杂模式）各有什么区别？ 在标准模式下，浏览器的解析规则都是按照最新的标准进行解析的。而在兼容模式下，浏览器会以
百度前端高频react面试题（持续更新中）
beifeng11996的博客
02-27 279
this.props是组件之间沟通的一个接口，原则上来讲，它只能从父组件流向子组件。React具有浓重的函数式编程的思想。提到函数式编程就要提一个概念：纯函数。给定相同的输入，总是返回相同的输出。过程没有副作用。不依赖外部状态。this.props就是汲取了纯函数的思想。props的不可以变性就保证的相同的输入，页面显示的内容是一样的，并且不会产生副作用受状态控制的组件，必须要有onChange方法，否则不能使用 受控组件可以赋予默认值（官方推荐使用 受控组件） 实现双向数据绑定。
<el-table-column v-else align="center" header-align="center" property="goods_name" label="商品"> <template slot-scope="scope"> <el-select clearable v-model="scope.row.goods_id"> <el-option v-for="goods in merchandiseNameData" :key="goods.data" :label="goods.value" :value="goods.data"> </el-option> </el-select> </template> </el-table-column> <el-table-column width="160" align="center" header-align="center" property="" label="材质"> <template slot-scope="scope"> <span>{{ scope.row.texture }}</span> </template> </el-table-column>上面下拉框改变 修改下面的值
06-08
您的问题是如何实现在上面的下拉框改变后，...实现这个功能，可以在上面的下拉框中使用 `@change` 事件，当下拉框的值改变时，触发该事件，然后在事件处理函数中修改对应的值。具体代码实现可以参考下面的示例： ``` ...
前端框架-Vue
AyinMars的博客
03-25 6319
Vue Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios 页面跳转 ： vue-router 状态管理：vuex Vue-UI : ICE , Element UI 1 前端核心分析 1、VUE 概述 Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式框架，发布于2014年2月。 与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库
2023年前端面试汇总-React
越陌度阡
06-29 872
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
给 Android 开发者的 Flutter 指南（上）
Flutter 社区
06-06 377
这篇文档旨在帮助 Android 开发者通过 Flutter 开发移动应用。如果你了解 Android 框架的基本知识，你就可以使用这篇文档作为 Flutter 开发的快...
一个基于 Vue.js 的简单游戏项目示例：猜数字游戏 这个游戏的目标是让用户猜测一个随机生成的数字，并根据用户的输入给出提示
最新发布
10-14
内容概要：这篇文章详细地指导读者使用前端框架 Vue.js 结合 Vite 构建工具搭建起一个简洁的猜数字小游戏。从环境的配置到项目的初始化再到界面布局和核心功能的编码都进行了详细的描述，尤其是针对如何使用 Vite 创建新 Vue 项目以及用Tailwind进行样式配置的方法。 适用人群：本教程主要面向对前端技术有一定了解，并想进一步提高自己动手实践能力的研发人士与 Web 开发爱好者。 使用场景及目标：旨在让学习者快速上手基于 Vue 构造交互性强的小游戏程序，同时增强对于 Vue 和构建流程的理解掌握；此外，还能学到一些美化网页技巧如Tailwind的引入设置。 其他说明：本文提供了完整的游戏开发过程步骤，并附带有样例代码可供开发者边看边实验。
thinc_gpu_ops-0.0.4+cuda102-cp35-cp35m-win_amd64.whl
10-14
thinc_gpu_ops-0.0.4+cuda102-cp35-cp35m-win_amd64.whl
android自定义5级联动,使用Android如何实现5级联动地址选择器
10-14
源代码直接使用即可
精灵破坏粉碎爆炸切割割片插件：Destructible 2D v3.0.10
10-14
Destructible 2D是一个 Unity 资源，它专门用于 2D 游戏开发，提供了将常规的 2D 精灵（sprites）转换成可被破坏对象的功能。通过这个资源，开发者能够轻松实现游戏中物体的破坏效果，增加游戏的互动性和真实感。无论是环境元素、敌人还是其他游戏内对象，都可以利用这个资源快速实现复杂的破坏效果，从而提升玩家的游戏体验，让您的 2D 游戏更加生动有趣。 众多演示场景 ― Destructible 2D 包含大量的教程演示场景，分步指导你使用每个功能。这些场景包含详细的描述文本，其中解释了正在显示的内容、使用了哪些组件以及使用的是哪些设置。 易于使用 ― Destructible 2D 的设计是尽可能地灵活，同时又易于使用。为了实现这一点，每个组件均为完全模块化，遵循 Unity 的检查器设计风格，具有直观命名的设置，并包含详细的工具提示文本。如果你是程序员的话，完整 C# 源代码包含在内，让你可以创建和修改任何东西！ 爆炸 ― 此功能让你可以用光线、碰撞等等来损坏你的精灵。
el-select在选项数据源发生变化时，更新当前选中数据的value和label值
05-27
更新选项数据源和当前选中数据的 value 值，同时使用 $nextTick 方法等待 DOM 更新完成后，再次获取当前选中数据的 label 值，并与之前的 label 值比较，如果不同，调用 el-select 的 updatePopper 方法更新弹出框的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值