【element-ui】el-input 输入值不能正常回显，触发其他地方会显示解决方法

最新推荐文章于 2024-07-18 09:16:37 发布
最新推荐文章于 2024-07-18 09:16:37 发布
阅读量2.2k 收藏 2
点赞数
分类专栏： element-ui 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/angela_zhaoBei/article/details/133132886
版权

el-input 因为某些原因，导致输入或者选择完的数据回显不出来，点击其他地方，之前的数据会回显出来解决方法：

在改变数据复制的地方添加代码如下：

this.formData.name = JSON.parse(JSON.stringfy(this.formData.name))

小墨鱼_z
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue中动态渲染表单并回显数据时，遇到input输入框因数据动态赋值再次输入而未渲染问题
weixin_60172238的博客
07-10 497
Vue中动态渲染form表单，并回显，input动态有值后，输入框失效，数据改变但未及时渲染的问题,。
elementUI中input输入框输入内容时，输入框中未显示展示内容，但是可以获取输入框的值
rong0914的博客
07-15 3246
1.由标题情况描述可知，这必然是界面显示出了问题 2.通过this.$forceUpdate()进行界面刷新即可解决这个问题，解决方法如下： <el-col :span="8"> <el-form-item label="经办部门" prop="deptName"> <el-input v-model="inquiryBaseInfo.deptName" @input="change($event)" clearable disabled> </el-
【已解决:el-input标签无法输入或不显示文字】
aniudunaichiji的博客
03-11 7936
解决了element ui中input输入框无法输入的问题
el-input 赋值 不回显
Ninewu的博客
04-12 3209
问题：给input框赋值不回显需要点击其他输入框才会回显 解决：事件中添加 强制刷新 this.$forceUpdate() 好啦，测试一下
elementui中的el-input回显成功后不能进行编辑的问题
weixin_44506660的博客
05-31 2352
从两层嵌套的对象里取出一个值放入下拉框中，发现值只能回显不能编辑
vue2 input回显不能修改值的bug
最新发布
程小博衍的博客
07-18 236
【代码】vue2 input回显不能修改值的bug。
记录element ui 输入框数据回显时无法编辑的bug
lrx133的博客
01-04 1092
记录element ui 输入框数据回显时无法编辑的bug 在最近的项目中遇到element ui 的输入框在数据回显的情况下无法编辑的bug，经查阅资料终于解决了，下面说一下解决方法： input事件中添加 @input=“changeFn” changeFn(){ this.$forceUpdate(); } ...
关于vue中elementUI的input和select框值无法回显的问题解决
YANJIEAILISISI的博客
05-18 9440
1.用$set解决 2.用$nextTick解决 3.用$forceUpdate解决
el-input 输入后数据不显示，点击其他触发数据修改的的组件时数据又显示的问题
cluxmsy的博客
01-10 2292
vue+element的前端功能开发，根据后端数据动态绘制表单，表单数据的绑定及显示，以及表单数据的修改与保存。
ElementUI input输入框不回显
JetBlack
11-11 4417
问题描述：在某个回调事件中，给表单中的某个input赋值(已绑定v-model)，input不显示数据且无法编辑，在这个表单的其他input中修改值时，这个被赋值的input才会回显。 解决办法：在回调事件函数中，给input赋值后，强制刷新：this.$forceUpdate(); ...
el-input的回显问题
laoyaoshilaoyao的博客
12-24 1932
回显问题，一般解决点击页面不显示的问题 el-input 输入却不显示输入的内容 change(){ this.$forceUpdate() }
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
10-17
这将确保每个输入建议都符合`<el-autocomplete>`的预期格式，从而解决输入建议空白的问题。 接着，我们来看问题二。在用户切换输入建议列表时，可能会看到上一次的输入建议列表短暂地闪现，即使尝试清空`callback`...
详解element-ui中表单验证的三种方式
10-16
在使用Element-UI开发时，表单验证是必不可少的功能之一，它可以帮助我们保证用户输入的数据是正确和有效的。本文将详细介绍Element-UI中表单验证的三种常用方式，并通过示例代码进行说明。 首先，Element-UI提供的...
elinput内容过长显示悬浮框_Element-ui中元素滚动时el-option超出元素区域的问题
weixin_39905226的博客
12-20 1504
复现场景, 看图分析原因为简单起见, 把选项区域描述为popperElpopperEl的z-index 比较大, 会覆盖在其他元素上面popperEl默认是插入body元素的(可以将popper-append-to-body设为false后不插入到body)popperEl是在mouseup事件里去做隐藏逻辑的, 而按下鼠标, 移动滚动条的时候, 并没有触发mouseup事件.popperEl并没...
element中el-select绑定值为对象并回显问题
热门推荐
qq_42092195的博客
03-03 1万+
element 中el-select 绑定值为对象时，重新编辑时，不显示已选择的选项
Vue el-input 不显示值的解决方法
robotmen的专栏
11-27 1112
更改数据后，调用以下方法：this.$forceUpdate()。
element组件form表单输入框输入内容不回显
你怎么也喜欢嘴巴嘟嘟
03-31 3057
果然 vue3 还是有很多问题 使用一个element-plus 还是有很多问题 比如 我刚遇到的 输入到表单 无法回显问题 暂时无解，可能还是不如了解，但是使用了强刷新只有 数据是回显了 暂时还没遇到问题 <el-form :model="UserObj" :rules="rules" ref="UserObj" label-width="80px" status-icon
el-input输入值无法在输入框显示
我的博客
06-28 702
如果v-model绑定的是对象中的属性值，如：v-model=form.org;需要用this.$set(this.form,‘orgValue’,’’)的方式赋默认值 var vm = new Vue({ data() { return { form:{} } }, mounted() { vm.$set(vm.form,'orgValue','') } }); ...
el-cascader级联选择器手动赋值，input框不回显
weixin_44569565的博客
07-18 3752
1.在与级联组件同级的位置放置一个el-input标签，v-model与级联选择的绑定的变量相同，这样级联选择选什么都会赋给input。3.用样式把级联的input框隐藏掉，把弹出的panel位置调整一下，使它对准在input的正上方就ok啦！ps：可能会遇到只能点击不能输入的情况，是因为el-input被压到低下了，调整一下层级关系就可以，像这样。里是省市区，我输入‘北京’，就可以显示绑定，但是如果输入‘aaa’，就会显示无匹配数据⬇。并且失去焦点后，‘aaa’也会丢失。
element-ui el-cascader 数据回显
10-19
在 element-ui 的 el-cascader 中，可以通过 v-model 绑定选中的值，然后在选中值发生变化时触发 @change 事件，将选中的值保存到数据中，再在初始化时将数据中保存的值赋给 v-model 即可实现数据回显。 具体实现步骤如下： 1. 在 data 中定义一个变量，用于保存选中的值。 ``` data() { return { selectedValue: [] } } ``` 2. 在 el-cascader 中使用 v-model 绑定选中的值，并在 @change 事件中将选中的值保存到 selectedValue 中。 ``` <el-cascader v-model="selectedValue" :options="options" @change="handleChange" ></el-cascader> methods: { handleChange(value) { this.selectedValue = value; } } ``` 3. 在初始化时将 selectedValue 赋给 v-model。 ``` <el-cascader v-model="selectedValue" :options="options" @change="handleChange" ></el-cascader> mounted() { this.selectedValue = [1, 2, 3]; } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值