解决element下拉框组件选择后没有更新输入框内容的问题

于 2024-04-25 19:57:12 发布
阅读量418 收藏
点赞数 5
分类专栏： 前端 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_72726464/article/details/138198180
版权

查了一下午百度，很多都说需要强制刷新，但vue3好像用不了，并且我贴一张图

被一些文章误导了，现在说一下bug场景以及解决方案

场景是，当双向绑定为对象时，也就是json键值对对象时，此时此元素如果使用ref快速定位元素的属性，这个属性值不能与双向绑定的对象名相同，如果相同就会出现标题描述的bug。

哎，浪费一下午时间，大部分以为需要强制刷新才会显示，在这里也希望其他up主在写文章的时候，把bug前提场景描述一下，不要误导他人

夏之渺
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
element下拉框选择值不更新问题
知所云
06-16 4747
在使用vue+element ui 的时候遇到下拉框选择值发生变化了，但是页面值却没有更新 代码 <el-select v-model="ruleForm.oprID" @change="updataOprID"> <el-option v-for="item in collector" :key="item" :label="item" :value="item"></el-option> </el-select> 页面如图
解决element ui select下拉框不回显数据问题的解决
10-17
在开发Vue.js应用时，Element UI是一个常用的组件库，提供了丰富的UI组件，其中包括`el-select`下拉选择框。然而，在实际使用过程中，有时会遇到`el-select`无法正确回显已选择数据的问题。本篇文章将深入探讨这个...
select视图不更新问题
qq_40711550的博客
02-10 1393
使用element 组件 下拉列表时 数据更新，视图不更新问题 是因为数据层次太多，render函数没有自动更新，需手动强制刷新。 使用vue强制刷新forceUpdate 方法 <el-select @change="$forceUpdate()" v-model="query.crontab" class="filter-item" placeholder="请选择调度时间"> <el-option v-for="(item,index) in option" :ke
elementUI-表单-下拉框数据选中后，视图不更新
weixin_42414634的博客
11-13 323
2.还是无法解决可以给组件绑定事件 @change="$forceUpdate()"1.prop和v-model绑定要一致。data里数据要定义。3.还可以用$set的方法。
Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案
weixin_45084986的博客
04-04 4494
本文主要记录多选操作 Element-ui官网参考 一、像下面这样直接使用，页面选择下拉列表数据，页面时不会更新的 <!-- 表格区开始 --> <el-table size="mini" :data="tableData" style="width: 98%"> <el-table-column label="select" width="100"> <!-- <template slot-scope="scope"> -->
elementUI -el-select不更新问题
qq_40596488的博客
09-11 1763
elmentUI 踩坑之 elselect 出现问题： 选择下拉框的值并没有复制到输入框中；但其实值已经变了并没有更新到输入框中 解决办法： 即可解决；
element-ui el-select不更新问题
jiangjunyuan168的博客
11-04 5456
问题： <el-select v-model="editForm.type_id" placeholder="请选择分类"> <el-option v-for="(item,index) in getalltype" :key="item.index" :label="item.name" :value="item.id + ''"></el-option> </el-select> 在下拉框中选择某个值后，el-select绑定的值更新了但是页面显示没有
Vue 动态添加el-select属性导致视图不更新问题
qq_35181466的博客
04-21 1715
原因：VUE不允许在已经创建的实例上动态添加新的响应式属性 方法1：强制刷新页面 //给select写一个@change，然后把this.$forceUpdate();放方法最后面进行强制刷新 this.$forceUpdate(); ...
下拉框数据未实时更新vue+elementui
gaoyu007的博客
02-22 530
下拉框数据未实时更新
基于Element的组件改造的树形选择器(树形下拉框)
10-15
在本文中，我们将深入探讨如何基于Element UI框架进行组件改造，特别是创建一个树形选择器（树形下拉框）。Element UI 是一个流行的 Vue.js UI 框架，提供了许多开箱即用的组件，如 el-select 和 el-tree。然而，在...
el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件
05-10
"el-tree-select:基于el-select和el-tree改造的树形选择器（下拉框）组件"是一个自定义的前端UI组件，它结合了Element UI库中的el-select和el-tree两个组件的功能，创建了一个适用于数据层级关系展示的选择器。...
基于element ui 二次封装的el-tree组件，支持懒加载数据，多选和单选，以tag方式回显输入框中，支持删除tag
最新发布
01-24
树形下拉选择组件，下拉框展示树形结构，提供选择某节点功能 基于element ui 二次封装的el-tree组件，支持懒加载数据，多选和单选，以tag方式回显输入框中，支持删除tag，提供调用组件示例代码
很实用的下拉框带检索功能
03-29
在网页设计和开发中，"下拉框带检索功能"是一种常见的交互元素，它提高了用户在大量选项中快速定位和选择所需内容的效率。本文将深入探讨这一功能的设计原理、实现方式以及相关技术。 首先，下拉框（Dropdown）是...
数据无法回显,数据不能实时更新例如:elementui select 更改选中值后，无法渲染到页面中？输入框查询数据之后无法渲染到页面
路飞船长的博客
06-16 3286
通过事件打开弹窗,点击选中的数据将数据更新到input输入框内,添加到输入框之后可以修改数据例如CRUD的操作问题一:事件弹窗的引用事件方法问题二:点击选中的数据无法实时更新到输入框内问题三:需要点击其它按钮input输入框才会更新,无法做到实时更新问题一分析: 方法有很多种可以在菜鸟和csdn上都能找到,也许是格式不正确,漏写了某个字段问题二分析: 方法绑定的数组内的属性可能没对上,代码少写漏写,没有添加实时更新的代码问题三分析:很问题二基本类似解决方案1:我这里是试过几个有的格式不对最后使用的:@key
element vue select选择器选择后不回显解决
weixin_65456815的博客
06-12 4131
vue+element开发使用el-select不能回显的处理方案
Vue.js+ElementUI多选表格下拉框有默认值后不及时更新
qq_45677405的博客
08-01 1158
当使用Vue进行数据绑定时，通常情况下，Vue能够自动追踪数据的变化并更新视图，这被称为"响应式系统"。但在某些情况下，直接赋值一个新值给对象属性可能无法触发响应式更新，特别是对于在Vue实例创建时不存在的属性。
ElementUI中el-select设置下拉框选项内容和选中项内容不一致
我的地盘子
12-15 1942
element select
Vue $forceUpdate强制更新
qq_43137834的博客
01-06 312
this.$forceUpdate() 强制进行局部更新。
element-ui 点击下拉框时判断另一个输入框中是否有值
06-09
您可以在 element-ui 的下拉框组件中绑定一个 `click` 事件，然后在事件处理函数中获取另一个输入框的值进行判断。具体实现步骤如下： 1. 在下拉框组件上绑定 `click` 事件，例如： ```html <el-select @click="checkInput"> <!-- 下拉框选项 --> </el-select> ``` 2. 在事件处理函数中获取另一个输入框的值，例如： ```javascript checkInput() { const inputValue = this.$refs.input.value // 假设另一个输入框是一个带有 ref 属性的 input 组件 if (inputValue) { // 输入框有值，执行其他操作 } else { // 输入框为空，执行其他操作 } } ``` 在上述代码中，我们通过 `this.$refs.input` 获取到了另一个输入框的实例，然后可以通过 `value` 属性获取输入框的值进行判断。如果输入框有值，则执行某些操作；如果输入框为空，则执行其他操作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值