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

最新推荐文章于 2024-04-16 16:30:37 发布
最新推荐文章于 2024-04-16 16:30:37 发布
阅读量831 收藏
点赞数 3
分类专栏： 笔记 文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40796623/article/details/125138624
版权

已经第n次使用el-select了

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

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

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

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

@@十二
关注
专栏目录
el-select踩的坑记录一下
JankoY的博客
10-15 627
从后端获取的数据给el-select渲染，渲染失败 前端代码 获取数据 async getSkus(value){ let sn = value sn.forEach(item=>{ if (sn.length > 1) { sn.splice(0, 1) console.log('删除了这个->' + item); } }) const { data:res } =
Vue快速入门学习笔记(更新ing)
喜欢前端的后端 MelodyJerry
11-15 4180
原在博客园发布，先同步到CSDN：https://www.cnblogs.com/melodyjerry/p/13768594.html 本笔记综合了视频狂神说的Vue快速上手和菜鸟教程、CSDN等博客文章，以及个人的一些学习见解与体会。 由于是为了团队需要而快速入门，HTML、CSS、JS、Vue等基础均不全，故本笔记仅供参考学习使用。 Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。 HTML + CSS + JS : 视图 ： 给用户看，刷新后台给的数据 网络通信 ： axios.
element ui之 el-select选其他值后，框内值不改变
qq_40020447的博客
07-23 5976
看别人解决的。 原文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 6067
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选择框选择无反应，值已经更新，但是页面没有显示变化（2024-04-16）
hap1994的博客
04-16 1367
点了选择框【休假】，但是页面并没有选中，是因为页面响应数据没有更新。解决方案，使用强更新机制强行更新页面视图。改完之后就可以选择了。
el-select选中其他数值,但是页面的数据不变解决
q249859693的博客
06-21 972
el-select选中其他数值页面的数据不变
el-select选择值之后试图没有更新的问题
piaocanY的博客
06-03 1386
问题就是 在用element-ui的下拉框组件的时候，选择完值死活没有更新上去 查了办法一开始用的是给 select加个change事件，对数据强制刷新，this.$forceUpdate(); 没有生效 后来仔细看下代码，是因为el-select绑定值的问题。。。。 model 要绑定插槽里面的每一项 value值 解决 主要前段时间用的是ant-desgin-vue 现在之前碰到的问题忘了，之后会多总结遇到的问题，希望能帮助到初踩坑的你们 ...
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通
m0_67619362的博客
05-06 2704
fontSize:‘23px’ } } 4、怎样理解 Vue 的单向数据流？ 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。子组件想修改时，只能通过 $emit
30 道 Vue 面试题，内含详细讲解（涵盖入门到精通，自测 Vue 掌握程度）
BYGFJ的博客
12-09 1687
前言 本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，当然大佬级别的请随意。希望读者读完本文，有一定的启发思考，也能对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，对 Vue 有更好的掌握。 文章最后一题，欢迎同学们积极回答，分享各自的经验 ~~~ 辛苦整理良久，还望手动点赞鼓励~ 1、说说你对 SPA 单页面的理解，它的优缺点分别是什
30道Vue面试题详解【文末送书】
m0_71102594的博客
05-24 379
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 3570
原因 数据层次太多，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 2976
在vue中使用el-select下拉框，当你选中选项时页面不更新。 可以通过在el-select的change事件中调用$forceUpdate()方法。 一行代码直接搞定。
element-UI使用el-select做字典映射时label值不显示问题
RanDoll_的博客
12-09 2475
使用elementUI中的el-select组件时出现的问题
ElementUI Select设置默认值更改选择后值不改变
a1783118的博客
11-03 3335
ElementUI Select设置默认值更改选择后值不改变
VUE使用ElementUI下拉框 @change事件数据不回显
m0_37678652的博客
08-25 2679
问题 在VUE中使用ElementUI的el-select下拉框，它是通过接口异步获取的下拉框数据，选择某一个值后，虽然在绑定的 @change 事件中能够看到已赋值成功，控制台输出也显示赋值操作完成数据变化，但是框上却没有显示选中的值。 解决方案 VUE它是无法监听动态新增的属性的变化，但是有一个方法可以为动态属性赋值，那就是$set。 <template> <el-select v-model="value" multiple filterabl.
element 组件改变值后选中的内容不变
吴冬雪的博客
08-22 932
问题场景：默认下拉框选中了值，切换下拉框选中的值，值改变了，但是视图未改变。
vue下拉框值改变_vue select下拉框绑定值不跟着变问题
weixin_39717152的博客
12-22 3321
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 1574
实现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
python ui自动化怎么定位el-popover和el-select样式的元素
最新发布
07-03
在Python中，UI自动化通常使用像Selenium、PyAutoGUI这样的库来模拟用户操作，包括定位特定的HTML元素，如Element UI（饿了么）中的`el-popover`和`el-select`。这些组件是基于Web技术的，所以定位它们通常依赖于CSS选择器或XPath。 **定位`el-popover`和`el-select`元素：** 1. **CSS选择器：** - `el-popover`通常有一个`data-v-xxxx`的动态属性标识，你可以结合`.el-popover`的选择器，再加上动态ID或类名来定位，例如： ```python from selenium.webdriver.common.by import By el_popover = driver.find_element(By.CSS_SELECTOR, ".el-popover[data-v-your-dynamic-id]") ``` - 对于`el-select`，也是类似，可能会包含`el-select`和`is-active`等状态类： ```python select_element = driver.find_element(By.CSS_SELECTOR, ".el-select.is-active") ``` 2. **XPath表达式：** 如果元素结构比较复杂或者CSS选择器不够精确，可以尝试使用XPath。`el-popover`和`el-select`可能通过其特有的标签路径来识别，比如： ```python xpath_popup = "//div[@class='el-popover'][@data-v-...]" xpath_select = "//select[contains(@class, 'el-select') and contains(@class, 'is-active')]" ``` 记得替换`[...]"`部分为实际的动态属性值。 **相关问题--:** 1. Selenium库如何处理动态生成的UI元素？ 2. 如何根据元素的特征（如状态类）选择多个相似元素？ 3. 在Python UI自动化中，如果元素定位失败怎么办？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值