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

最新推荐文章于 2024-07-25 08:49:08 发布
最新推荐文章于 2024-07-25 08:49:08 发布
阅读量463 收藏
点赞数 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 4768
在使用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设置下拉选择切换必填和非必填
12-10
在Element-UI中，开发Web应用时常会遇到需要动态调整表单验证规则的情况，比如一个下拉选择框根据用户的选择，使得某个输入框变为必填或非必填。本篇文章将详细讲解如何实现这一功能。 首先，我们来看一下具体的...
解决element ui select下拉框不回显数据问题的解决
10-17
主要介绍了解决element ui select下拉框不回显数据问题的解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
el-table中使用el-select，选择后不刷新解决方法
李白爱睡觉的博客
09-18 3615
最近在做项目是，在element表格中使用下拉，但是下拉选择后，数据没有显示在select组件上，搜索后找到解决方案： <el-table :data="nodeFormTableData" style="width: 100%"> <el-table-column prop="personType" label="人员类型"> <!-- 人员类型下拉 --&
Element-ui的el-select组件使用记录:将el-select放到el-table中页面不更新问题的解决方案
weixin_45084986的博客
04-04 4531
本文主要记录多选操作 Element-ui官网参考 一、像下面这样直接使用，页面选择下拉列表数据，页面时不会更新的 <!-- 表格区开始 --> <el-table size="mini" :data="tableData" style="width: 98%"> <el-table-column label="select" width="100"> <!-- <template slot-scope="scope"> -->
Vue.js+ElementUI多选表格下拉框有默认值后不及时更新
qq_45677405的博客
08-01 1249
当使用Vue进行数据绑定时，通常情况下，Vue能够自动追踪数据的变化并更新视图，这被称为"响应式系统"。但在某些情况下，直接赋值一个新值给对象属性可能无法触发响应式更新，特别是对于在Vue实例创建时不存在的属性。
elementUI-表单-下拉框数据选中后，视图不更新
weixin_42414634的博客
11-13 345
2.还是无法解决可以给组件绑定事件 @change="$forceUpdate()"1.prop和v-model绑定要一致。data里数据要定义。3.还可以用$set的方法。
Element UI --- Select下拉框多选页面数据不更新问题
小破孩的博客
11-06 4312
昨天在做项目时，有一个功能是使用Element UI的Selec多选下拉框，在使用时，发现每次选择的数据已经发生变化，但是页面上的显示却没有变化，由于是第一次碰到这个问题，一开始无从下手，后来百度寻找了方法，其实也很简单，就是调用一个方法而已。 问题： 上图就是已经选择了两个值，控制台也输出了两个角色的ID，但是select框内显示却没有变化，依然是显示一个。。。 在网上寻找方法，说是：render函数没有自动更新，所以在选择的时候需要强制更新 解决办法： <el-select v-m
elementUI -el-select不更新问题
qq_40596488的博客
09-11 1776
elmentUI 踩坑之 elselect 出现问题： 选择下拉框的值并没有复制到输入框中；但其实值已经变了并没有更新到输入框中 解决办法： 即可解决；
基于Element的组件改造的树形选择器(树形下拉框)
10-15
在本文中，我们将深入探讨如何基于Element UI框架进行组件改造，特别是创建一个树形选择器（树形下拉框）。Element UI 是一个流行的 Vue.js UI 框架，提供了许多开箱即用的组件，如 el-select 和 el-tree。然而，在...
Vue下拉框回显并默认选中随机问题
12-09
在Vue.js中，使用Element UI库进行前端开发时，经常需要用到`<el-select>`组件来创建下拉框。然而，在实际应用中，我们可能会遇到下拉框数据回显时出现的随机性问题，即默认选中项不固定，可能会随页面刷新而变化。...
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-select不更新问题
jiangjunyuan168的博客
11-04 5545
问题： <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-element中el-select的el-option选中值，但页面框中不显示值，需要输入一个其他框值才显示，input同理
ll_883963的博客
07-07 3546
问题描述： el-element中el-select的el-option选中值，但页面框中不显示值，需要输入一个其他框值才显示。 //在el-select中写一个事件 @change="change" <el-form-item prop="aa"> <el-select v-model="dataForm.aa" @change="change" //加上这个函数 > <el-option v-for=.
vue el-element中el-select选中值，数据已经改变但选择框中不显示值，需要其他输入框输入值才显示这个选择框才会显示刚才选中的值
qq_45067263的博客
02-17 5462
项目场景： <el-table-column label="税率" prop="TaxRate" width="180" align="center" show-overflow-tooltip> <template slot-scope="{row, $index}"> <el-form-item :prop="'InquiryItemList.' + $index + '.TaxRate'" label-width
Vue 动态添加el-select属性导致视图不更新问题
qq_35181466的博客
04-21 1728
原因：VUE不允许在已经创建的实例上动态添加新的响应式属性 方法1：强制刷新页面 //给select写一个@change，然后把this.$forceUpdate();放方法最后面进行强制刷新 this.$forceUpdate(); ...
下拉框数据未实时更新vue+elementui
gaoyu007的博客
02-22 559
下拉框数据未实时更新
vue通过el-select下拉框选择成功时不显示，当填写其他内容时，才显示的问题
xuguoxing123的博客
03-30 3047
       最近在实际开发应用中遇到这么一个问题，如下所示：        当选择“计算机科学与技术”的时候，此时并不会展示已经选择的内容，也不会触发任何事件，当填写其他内容时，已选择的内容就能展示出来，如下图所示：        我的下拉选择框的代码的写法是这样子的：  &nbsp
【前端】vue 报错:The template root requires exactly one element
最新发布
程序员-张师傅
07-25 922
在 Vue.js 中，当你遇到错误 “The template root requires exactly one element” 时，这通常意味着你的 Vue 组件的模板（template）根节点不是单一的元素。Vue 要求每个组件的模板必须有一个根元素来包裹所有的子元素。如果你的模板看起来像这样，就会出现这个错误：
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、付费专栏及课程。

余额充值