iframe下使用el-input-number组件造成数据不同步

最新推荐文章于 2023-09-23 11:17:25 发布
最新推荐文章于 2023-09-23 11:17:25 发布
阅读量400 收藏
点赞数
分类专栏： javascipt 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42369612/article/details/126973913
版权

iframe下使用el-input-number组件造成数据不同步

现象:

测试发现,eb上面输入的数字与实际上报接口的数字对不上,总是之前的那个数字,比如最开始是30,然后改成1,提交的时候发现接口中的参数传的是30
复现:经常复现

排查:

在我的电脑上重复上面的操作,发现并没有这个问题,但是在测试的设备上确实存在这个问题,而且可以经常复现,没有报错,代码层面去看也没有问题(当时觉得是与设备有关)
后来发现只要每次输入之后,让鼠标失焦后再提交这个问题就不会出现了

原因:

el-input-number组件的双向绑定有问题
在这里插入图片描述
输入的是3,但是绑定的值是1,但是当鼠标失焦后,会同步成3
说明这个组件在失焦后才会将数据进行同步,如果这个时候点击提交提交
正常会先触发blur事件,再触发click事件,也就是说不会存在问题

具体问题具体分析

el-input-number组件是在iframe中
提交按钮是在被嵌入的页面中
iframe会监听这个组件的数据,如果发生改变就会向主页面通信进行同步
postmessage是一个宏任务,也就是说,其实点击提交就会先把上一次的数据提交,然后再同步iframe中的数据,就导致了这个问题

解决

在主页面的提交函数中加一个setTimeout即可
就会先进行与iframe数据同步,在提交数据
玄学问题就此解决…

David_Xia001
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Element系列之el-input-number无法实时监听数据变化的解决方法
老__L的博客
05-17 7031
el-input-number无法实时监听数据变化的解决方法
解决el-input-number修改值后不更新
mischievous_boy的博客
02-06 7169
问题：在pl-table（可以让使用大量表格的数据不卡顿的库）中使用el-input，修改el-input中的内容是可以的，但是如果下拉之后不显示在页面之后，再次回到这个位置，修改的值显示不成功，还是原来的值。另外输入的值不能超过预先设置的值，如果超过就弹出提示框，另外保证精确到小数点两位数 在修改过程中遇到的技术 1.el-input-number 输入框输入的数据是数字，可以设置精度 2.关于el-input-number中触发change事件想要传递一个自定义的值 因为此时的change
【element-ui】el-input 输入值不能正常回显，触发其他地方会显示解决方法
小墨鱼的前端问题录
09-21 2055
【代码】【element-ui】el-input 输入值不能正常回显，触发其他地方会显示解决方法。
el-input-number @change校验数据 改变绑定数据值后输入框中值与绑定值不一致的问题
最新发布
qq_53492819的博客
09-23 1085
el-input-number@change中 假如绑定的值a最开始值为1 然后在el-input-number中输入10然后经过校验发现10不合理 然后把a的值复原回1 在经过change中方法校验之后 发现a的值从1变成了1即a的值根本没发生改变 所以dom不会更新 因此输入框中的值也还会是你输入的10。在change绑定的方法中 对a直接赋输入的值 然后在setTimeout($nextTick不一定有效,所以建议用setTimeout)中再赋回原来的值。
解决el-table中使用el-input-number时，组件数值无法正常更新
heirui的专栏
02-08 1830
点击组件的 加 减 按钮时，发现数据无法更新，或者无法正常更新，每次只能点一两下，然后数值就不动了，而且它居然 还能影响其他行的组件。经测试问题也可以完美解决，不需要key/row-key设置，表格中prop、v-model也都正常操作就可以了。然后博主提供的解决方案是通过添加key属性来解决，我没试，我直接从数据源那里解决。说这个问题是因为“绑定的数据未刷新是vue的绑定深度过多，没有关联绑定起来”在cdsn看了一些相关文章，最后在这里看到一句话，
vue-cli3.0+element-ui上传组件el-upload的使用
11-28
在Vue CLI 3.0项目中，Element-UI的上传组件`el-upload`是一个非常实用的工具，用于处理各种文件上传需求。以下是对这个组件的详细解析和使用方法。 首先，`el-upload`组件提供了丰富的属性来满足各种限制条件： 1...
fluid-iframe：提供流体宽度的Web组件
02-06
流体框架 Web组件，提供流体宽度<iframe> 。安装使用 ： $ npm install fluid-iframe用法导入FluidIframe并将其注册为自定义元素。 < script type =" module " >import FluidIframe from '...
vue-friendly-iframe-一个Vue js组件，用于创建超快速加载，无阻塞的iframe。-Vue.js开发
05-27
vue-friendly-iframe基于Aaron Peter的文章，用于创建动态异步iframe的Vue js组件：http://www.aaronpeters.nl/blog/iframe-loading- vue-friendly-iframe Vue js组件，用于基于以下内容创建动态异步iframe：亚伦·...
iframe-resizer-master.rar
12-26
2. 模块化开发：在组件化开发中，`iframe`可以作为独立的模块，通过`iframe-resizer-master`进行尺寸调整，以适应不同的布局需求。 3. 第三方服务集成：如地图、视频等外部服务，可以通过`iframe`嵌入，利用`iframe-...
vue组件中使用iframe元素的示例代码
08-28
Vue 组件中使用 iframe 元素的示例代码 本文主要介绍了 Vue 组件中使用 iframe 元素的示例代码，分享给大家，具体如下： iframe 元素的基本使用 在 Vue 组件中使用 iframe 元素可以实现各种功能，如展示超链接、...
VUE2.0 elementUI el-input-number 数据更新，视图不更新
weixin_40143267的博客
08-22 1456
el-input-number 数据更新，试图不更新
el-input-number直接在输入框输入内容v-model的值不会跟着改变 问题
小猪的博客
07-16 2721
有一个需求就是，只能输入一个大于0并且是0.5的倍数两位小数，使用elemnt ui 的inputNumer控件，但是使用的时候添加了属性step和precision两个属性，问题就来了，输入了一个小数值，在判断是否是0.5的倍数时，修改值v-mode得不到更新 于是乎 解决办法： <el-input-number @change="priceChange(dataForm.price)" v-model="dataForm.price" :step='0.5'
el-input控制只能输入数字时，双向绑定偶尔失效
m0_48660438的博客
12-10 1738
el-input只能输入数字时，双向绑定偶尔失效
react中使用antDesign的Input/InputNumber最多保留两位小数，多的小数位禁止输入，且实现输入实时校验并添加千位分隔符
热门推荐
Sylvasylva的博客
05-18 1万+
在项目中有一个需求，对输入的金额需要最多保留两位小数，多的小数位禁止输入。使用网上查询的方法很多都不能实现实时校验，大多是输入的多位小数在失焦后再处理为两位小数，并不满足我这个项目的需求，经过多次改造尝试符合预期效果，特此写下笔记分享。 1.在input中实现，主要利用Form.Item自带的属性getValueFromEvent <Col span={10}> <Form.Item
element-ui自定义表格怎么给input双向绑定数据
丑小鸭变黑天鹅的博客
08-05 4896
element-ui自定义表格怎么给input双向绑定数据问题描述 问题描述 有个项目需求点击添加按钮添加一行，我采用的是自定义表格，刚开始写好之后，点击添加，可以实现，但是却发现输入框不能输入数据，控制台报错 先看一下，错误的代码，这里列出了主要代码 <el-table :data="tableData" style="width: 98%; margin-left:20px"> <el-table-column label="属性类型" align="ce
el-input-number步长设置后，手输和显示不一致问题
weixin_44770377的博客
05-30 1458
el-input-number有个坑，设置步长20后，输入44显示40，但是v-model拿到的值却是44，导致传给后台的数据是错的！如何解决？ <el-input-number v-model="info.cartNum" :step="info.qtyctn" :min="1" :max="9999" @change="changeCartNum(info)"></el-input-number> changeCartNum(info) { const para
记录el-input使用原生JS事件修改值data后v-model值不同步问题
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
08-26 1308
记录el-input使用原生JS事件修改值data后v-model值不同步问题 原因：js修改时没有触发input事件$emit(‘input’,value)这时候问题出现了，v-html的值并没有改变。
el-input-number 组件无法修改默认值为空
s_156的博客
03-16 973
当num设置为 null 或者 “” 都不能将输入框的值变为空。后来发现 将num 设置为 undefined。
基于ElementUI 国际化电话组件el-phone-number-input用法
yuanyuan_HTML的博客
06-05 3093
1.首先安装vue 国际化电话组件 npm install el-phone-number-input; 2.当前页面引入组件 import { ElPhoneNumberInput, mobileValidator, phoneNumberValidator} from 'el-phone-number-input' 3.下面是具体使用代码：callingCode是国家区号，phoneNumber是手机号 import { ElPhoneNumberInput, mobile...
获取iframe中el-input 的值
06-10
要获取 iframe 中 el-input 的值，需要先通过 JavaScript 获取到 iframe 元素，然后再在 iframe 中查找 el-input 元素，并获取其值。以下是获取方法： ```javascript // 获取 iframe 元素 var iframe = document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值