el-select选择之后页面没有变动踩坑

最新推荐文章于 2024-04-16 16:30:37 发布
最新推荐文章于 2024-04-16 16:30:37 发布
阅读量906 收藏
点赞数 3
分类专栏： 笔记 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_40796623/article/details/125138624
版权
本文讲述了开发者遇到的一个Vue el-select下拉框选中值变更但页面未响应的问题，通过深入排查发现是由于数据对象内部值已更新但未触发视图更新。解决方案是使用$forceUpdate强制渲染最新数据。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

已经第n次使用el-select了

今天出现一个bug，选择了select下拉框的label但页面层没有变动.
原因：
下拉框选择的值是放在对象里面没有及时更新

打印数据id已经是改变了的，数据本身是被修改了，但是vue没有监听到而已，用$forceUpdate就相当于按照最新数据给渲染一下。

    //select改变
    changeSelect() {
      this.$forceUpdate();
    },

最终还是男朋友帮我找出问题，yyds!

Vue快速入门学习笔记(更新ing)
喜欢前端的后端 MelodyJerry
11-15 4659
原在博客园发布，先同步到优快云：https://www.cnblogs.com/melodyjerry/p/13768594.html 本笔记综合了视频狂神说的Vue快速上手和菜鸟教程、优快云等博客文章，以及个人的一些学习见解与体会。 由于是为了团队需要而快速入门，HTML、CSS、JS、Vue等基础均不全，故本笔记仅供参考学习使用。 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios.
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通
m0_67619362的博客
05-06 2792
fontSize:‘23px’ } } 4、怎样理解 Vue 的单向数据流？ 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit
el-select选择框选择无反应，值已经更新，但是页面没有显示变化（2024-04-16）
最新发布
hap1994的博客
04-16 2339
点了选择框【休假】，但是页面并没有选中，是因为页面响应数据没有更新。解决方案，使用强更新机制强行更新页面视图。改完之后就可以选择了。
element ui之 el-select选其他值后，框内值不改变
qq_40020447的博客
07-23 6153
看别人解决的。 原文https://blog.csdn.net/WSL_520/article/details/106860958 el-select选值后，框里值不变 问题场景：ElementUI下拉框el-select选值后，框里值不变 解决办法：$forceUpdate()，在el-select值改变的时候执行刷新组件 <template> <el-select v-model="value" placeholder="请选择" @change="$forceUpdate(
el-select选择无变化 解决方案
m0_52724742的博客
04-26 6449
el-select选择无变化解决方案 问题重现 //伪代码 <el-select v-model='value'> <el-option v-for='item in options' :key='item.code' :label='item.label' :value='itrm.value' > </el-option> </el-select> <el-radio v-model="radio" labe
el-select选中其他数值,但是页面的数据不变解决
q249859693的博客
06-21 1076
el-select选中其他数值页面的数据不变
el-select选择值之后试图没有更新的问题
piaocanY的博客
06-03 1580
问题就是 在用element-ui的下拉框组件的时候，选择完值死活没有更新上去 查了办法一开始用的是给 select加个change事件，对数据强制刷新，this.$forceUpdate(); 没有生效 后来仔细看下代码，是因为el-select绑定值的问题。。。。 model 要绑定插槽里面的每一项 value值 解决 主要前段时间用的是ant-desgin-vue 现在之前碰到的问题忘了，之后会多总结遇到的问题，希望能帮助到初踩坑的你们 ...
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
BYGFJ的博客
12-09 1735
前言 本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，当然大佬级别的请随意。希望读者读完本文，有一定的启发思考，也能对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，对 Vue 有更好的掌握。 文章最后一题，欢迎同学们积极回答，分享各自的经验 ~~~ 辛苦整理良久，还望手动点赞鼓励~ 1、说说你对 SPA 单页面的理解，它的优缺点分别是什
30道Vue面试题详解【文末送书】
m0_71102594的博客
05-24 422
Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分： 加载渲染过程 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted 子组件更新过程 父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> .
使用Swagger生成JAVA Mock Server（Springboot）代码
热门推荐
二一点
11-14 1万+
Swagger为我们提供了非常多的工具，其中最强的还要算这个代码的生成工具。在前后端分离的大环境下，前后端之间订立的接口显得尤为重要，接口在订立之后变动的可能性已经很小，这就要求我们提前去设计接口，也就是我们为前端提供的API。 但是我们发现，在开发过程中订立的接口寿命其实很短，这是一件非常严重的事情。因此Swagger为我们提供了另外一种比较优雅的方式：就是你先订立接口，然后再去用生成的接口，
el-select选中后，值未更新的问题
卜卦的博客
03-11 3647
原因 数据层次太多，render函数没有自动更新，需手动强制刷新（this.$forceUpdate） 方法 给select添加change事件，强制刷新。具体代码 <el-select v-model="forms.district_id" size="mini" placeholder="区" @change="userDistricts" class="diredge-add...
VUE中使用el-select选中选项后页面不更新问题
Cute_hupipi的博客
06-15 3155
在vue中使用el-select下拉框，当你选中选项时页面不更新。 可以通过在el-select的change事件中调用$forceUpdate()方法。 一行代码直接搞定。
element-UI使用el-select做字典映射时label值不显示问题
RanDoll_的博客
12-09 2636
使用elementUI中的el-select组件时出现的问题
ElementUI Select设置默认值更改选择后值不改变
a1783118的博客
11-03 3534
ElementUI Select设置默认值更改选择后值不改变
VUE使用ElementUI下拉框 @change事件数据不回显
m0_37678652的博客
08-25 2793
问题 在VUE中使用ElementUI的el-select下拉框，它是通过接口异步获取的下拉框数据，选择某一个值后，虽然在绑定的 @change 事件中能够看到已赋值成功，控制台输出也显示赋值操作完成数据变化，但是框上却没有显示选中的值。 解决方案 VUE它是无法监听动态新增的属性的变化，但是有一个方法可以为动态属性赋值，那就是$set。 <template> <el-select v-model="value" multiple filterabl.
element 组件改变值后选中的内容不变
吴冬雪的博客
08-22 1057
问题场景：默认下拉框选中了值，切换下拉框选中的值，值改变了，但是视图未改变。
VUE（el-select、el-option...）修改值后页面不更新
SA
07-14 1万+
现象： 明明绑定了v-model，但是在页面操作时输入没变化，点击其他地方后再回来又变了。 比如上图，用户类型明明绑定了userType，但是在选择的时候并没有第一时间反映到下拉框上。查看data定义如下 因为在data定义时，并没有说明userType这个属性，所以会导致userType属性是非响应式的。如果是非响应式属性，那么就会出现修改值后页面显示不及时更新的问题。 解决方案： 1、在定义的时候就写入属性（此时只要在下拉框选择，那么显示就会实时更新） 2、在方法内使用th.
vue下拉框值改变_vue select下拉框绑定值不跟着变问题
weixin_39717152的博客
12-22 3404
data() {return {value1: "",type: [{id: 1, name: '肖明'}，{id: 2, name: '小红'}，{id: 3, name: '小光'}],list: [1,2,3,4,5]}}v-for="_item in type":value="_item.id":key="_item.id">{{ _item.name }}通过循环生成了多个 sel...
实现Element UI中下拉框滚动加载
kj85855的博客
10-29 1641
实现Element UI中下拉框滚动加载 Vue.directive('loadmore', { bind (el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventList
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值