VUE中elementselect的label不改变问题。

已于 2022-02-17 17:21:07 修改
阅读量675 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js javascript 前端
于 2021-12-08 16:04:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzhenhuait/article/details/121793709
版权
本文探讨了Vue框架中监听对象属性变化的问题，指出当对象初始为空时，Vue只能监听到对象本身的变化，而无法监听到如`queryParams.cityCode`这样的深层属性变化。为了解决这个问题，需要在初始化时为`queryParams`对象添加如`cityCode`这样的属性，确保Vue能够跟踪这些属性的状态。这个细节对于理解和优化Vue应用的性能至关重要。
摘要由CSDN通过智能技术生成

在这里插入图片描述
主要原因是vue监听不到ID变化，是由于原来是queryParams:{},
这样vue只能监听到queryParams的变化，监听不到queryParams.cityCode等的变化，queryParams:{加入cityCode:null等属性就可以了}
在这里插入图片描述

这个软件需要设计一下
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中组件的props属性（详）
蜗牛~~
10-28 17万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
Vue3通透教程【五】Vue3中的响应式数据 reactive函数、ref函数
热门推荐
官方推荐
02-23 4万+
Vue3中的响应式数据
解决Element-UI v-for中修改item属性值后页面页面值不改变的问题。
赵同学的Blog
06-24 1869
解决element-ui v-for中修改item属性值后页面页面值不改变的问题。 写好的elementUI select选择器发现选择到值，但是页面不改变 添加change方法 <el-select v-model="form.value" placeholder="请选择状态" @change="change()"> <el-option ...
element中select，值更新视图不更新
Cang_Ye的博客
03-13 3835
一、 业务逻辑 使用el-table的自定义列功能，同一行数据的两列有互动，当一列（值来源）数据改变，另一列（默认值）的el-select无法选中值（实际v-model对应的数据已改变，但是页面上没有更新），如图： 二、原因 默认值这一列对应的select的v-model对应的字段是在table生成后动态插入的，初始的数据结构类似： //data 为el-table的data var data=[ {src:'param'} ] src字段改变后，在值来源的select的chan..
elementUI选择框选择后,绑定的值存在但是没有显示label的问题
Tuhongbin_的博客
04-19 2928
问题: 今天写elementUI时,发现之前下拉选择框正常在刚刚选择了一个项后,label无法正常显示,但是select绑定的值却可以正确变化 代码段: <el-select v-model="model.flowerId"> <el-option v-for="flower in flowerInfo" :key="flower.id" :lab...
VUE框架下拉框值不能更改问题
weixin_49080355的博客
02-27 963
VUE框架下拉框值不能改变的问题
element vue 获取select 的label_探索 Vue-Multiselect
weixin_39603598的博客
11-30 285
作者：疯狂的技术宅转发链接：https://mp.weixin.qq.com/s/NJh8xlBo3ipiuFa-ClQzkQ前言创建下拉菜单总是很麻烦的，特别是当我们需要自定义样式时，select 元素的作用非常有限。如果用 Vue 来构建我们的应用，则可以用一些组件来帮助简化工作。在本文中，我们将研究怎样用 Vue-Multiselect 库来改善下拉菜单的效果。准备工作首先，运行以下命令来安...
vue 关于改变数据源 页面不热更新问题（举例element select选中不显示label）
weixin_42508580的博客
11-04 1599
深入响应原理（记录） 在代码中可以打印出select 的选中value 但是页面不显示对应的label //template 代码 <el-form-item label="工作模式" prop="workTypeId"> <el-select v-model="form.workTypeId" multiple @change="currentWork"> <el-option v-for="item in workTypeOp
Vue下URL地址栏参数改变却不能刷新界面
夏已微凉、
05-20 3718
一、前言二、原因三、解决 一、前言 下拉选择，根据不同的值展示不同的内容，初次点击可以获取到相应的值，但是当第二次点击时，虽然地址栏的参数改变了，但页面内容并没改变。 URL 如下： http://127.0.0.1:8080/#/user?hobby=study http://127.0.0.1:8080/#/user?hobby=play 二、原因 vue项目中路由跳转默认采用hash的方式，而hash的变化不会导致浏览器发送请求到服务器； 将获取数据的的函数的执行放在了Vue生命周期函数 .
vue里获取不到data_Vue中data数据响应问题
weixin_39909366的博客
12-19 3501
Vue 不允许在已经创建的实例上动态添加新的根级响应式属性。也就是说创建过后，data中不允许添加根数据1. 对对象处理Vue可以检测到对象属性的修改，不能检测到对象属性的添加和删除，也就是说这种方式处理后，vue不能检察到数据变化，不能进行渲染更新，Vue可以使用Vue.set 和 Vue.delete实现Vue.setVue.set 方法用于设置对象的属性，它可以解决 Vue 无法检测添加属...
vue 组件第一次不渲染问题_VUE的某些常见问题及解决方法
weixin_39738115的博客
12-28 3084
VUE的某些常见问题及解决方法双向绑定数据，界面未渲染？最近做vue项目的过程中，经常碰到会有双向绑定数据，data中定义的数据进行变动时，页面实际展示层未改变。常见的应用场景有下面几种：form表单里面，修改表单的时候，分明预置了数据，但是没有显示element-ui常用的select组件，下拉选择了一个元素，但是选中框中并没有显示自己写选中切换的组件，点击后触发active的样式，触发的字段为...
el-select 手动设置model的值之后 选项不能变化问题解决
aozhi8250的博客
09-16 2014
今天做的一个需求 三级联动层级选择器 我用的select去做 尝试解决掉一个场景 就是选定B之后在返回去修改A 此时B应该清空 于是在A 里面@select 完成上述操作 但是改完之后发现，此时B选项无论如何修改，选项的label值 不能展示在选择框里 最后各种尝试发现 在手动设置B的值之后 应该加一句 this.$forceUpdate();才可以...
vue对select下拉框赋初值后，不能进行选择的问题
weixin_42261408的博客
11-10 1万+
Vue使用elementUI的select选择器出现的问题：      初始化赋值后，无法更改label值，数据已经改变，但UI样式为未变 原因：由于对此对象做了一些处理（将对象的键全部转换成小写），改变了对象的键和值，但是由于Vue检测不到对象的变化，导致这个问题 解决方案：使用Vm.$set方法，详情见api官方文档  具体代码如下： HTML部分 &lt;el-form-item...
vue解决el-select下拉框不显示label问题
weixin_46127011的博客
01-05 2695
最近在开发项目的过程中，遇到了这个问题。el-select的下拉框数据是后端返回的，当点击下拉框选项时会请求后端的接口，当在请求接口的过程中label是有显示的，但是在请求完成后，label就没有显示了。vue无法监听动态新增属性的变化，所以当向后端请求数据完成时，这时对应的v-model绑定的值是响应式的，这时候vue是无法监听到的。注：v-model绑定的值须是object.prop的形式。使用this.$set()方法。
Vue数据修改，页面没有改变 $nextTick()
Liberty_yes的博客
01-26 2449
vue数据改变，代码执行，页面没效果，没更新问题，页面渲染和代码执行先后顺序问题
vue 解决element-ui中el-select显示value不显示label的问题
weixin_43575792的博客
03-27 1万+
项目场景： 使用element-ui中的el-select，给选择框赋值时显示的值是value不是label 如下图所示，显示内容不是label 石河子大学而是value 1 原因分析： 产生上图的情况一般是由于el-select里面的v-model和v-value参数的类型不同，即下方代码中的form.sid和item.sid的类型不一致， <el-select v-model="form.sid" placeholder="请选择学校" style="width: 100%">
vue3中弹框中的el-select下拉组件显示value而不显示label
最新发布
kanno的博客
10-20 2498
vue3中弹框中的el-select下拉组件显示value而不显示label
ElementUI Select设置默认值更改选择后值不改变
a1783118的博客
11-03 3324
ElementUI Select设置默认值更改选择后值不改变
VueAreaLinkage 设置默认值Label不更新修改办法
11wy11的博客
03-28 989
VueAreaLinkage 设置默认值无效修改办法 关于使用VueAreaLinkage，自定义数据，动态设置绑定的数组后，行政区划组件上的label不发生变化的解决办法。 组件基本介绍及使用场景 vueAreaLinkage VueAreaLinkage安装使用 5.0版本之后，可以通过npm install vue-area-linkage --save和npm install are...
解决Vue中Element-UI组件使用常见问题
"关于在Vue项目中使用Element-UI框架时可能遇到的问题及解决方案的文档" Element-UI是基于Vue.js的一个流行前端组件库，提供了丰富的UI组件，如表格、按钮、下拉菜单等，用于快速构建美观的企业级前端应用。在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值