Element-ui input输入框限制输入数字后，当输入非数字后v-model失效

Vue.js 输入验证与数据同步修复
最新推荐文章于 2025-03-28 18:52:59 发布
原创 最新推荐文章于 2025-03-28 18:52:59 发布 · 1.3k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

该博客探讨了在Vue.js中遇到的输入验证问题，当用户输入非数字字符时，input字段无法输入，且在再次输入数字时，v-model的值未更新。解决方案在于监听input事件，实现实时同步，确保v-model与input值一致。通过在input事件中调整值并赋给v-model，可以有效解决这个问题。 
<el-input    
	v-model="modelDetailData.moduleWeight"
	oninput="value=value.replace(/[^\d]/g,'')"
	placeholder="请输入模块权重"
></el-input>

这种情况当输入非数字的时候input是输入不上的，但是当再次输入数字的时候v-model显示的是输入非数字之前的v-model的值

解决：在输入框改变的时候，把value值赋值给v-model绑定变量，使两者保持一致

<el-input
   v-model="modelDetailData.moduleWeight"
   @input="limit"
   placeholder="请输入模块权重"
></el-input>

limit(e){
	this.modelDetailData.moduleWeight=e.replace(/[^\d]/g,'') 
},
Vue双向绑定失效 v-model
weixin_45821730的博客
02-19 2782
项目场景： Vue做实例时发现我的双向绑定不能正常出效果，但是数据确实是有实时修改，只是页面展示时没有渲染出来。 问题描述： 大概就是这种情况，我没明白怎么整动图上去，就讲究看一下吧。 input框里的数据修改时，vue的data的数据确实是改变了，但是没有渲染到页面显示中 这里放一下出错的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <
vue directive自定义指令封装输入框校验，按钮权限（解决v-model绑定失效问题和数字校验的中文问题）
指尖笑
11-06 3006
学习总结： 因业务需求，Eelementui封装的表单校验不能满足需求，利用vue的自定义指令封装满足业务的输入框校验，按钮权限指令。参考：https://cn.vuejs.org/v2/guide/custom-directive.html 问题描述： 修改输入框的值，并没有修改到v-model绑定的值 实现代码： 一、只能输入三位0-9-a-z的字符串 // // 注册一个全局自定义指令 `v-name` Vue.directive('name', { inserted(el, binding
input标签v-model属性失效
m0_53820941的博客
10-23 658
疑惑： 很奇怪的一点是，nextTick()前边再加一句ans.value=""就又失效了，真离谱，如下。问题：input标签v-model属性失效，清空ans, 但是ui上依然显示。解决方案： 使用nextTike, 注意要import。
element-ui input限制只能输入数字时，先按非数字键获取v-model失效
weixin_39983904的博客
08-18 260
<el-form-item label="手机号" > <el-input class="input-w" v-model="form.phone" maxlength="11" oninput="value=value.replace(/[^\d]/g,'')" @blur="form.phone = $event.target.value" placeholder="请填写"></el-input> </el-form-item> 解决代码 @b
oninput引发v-model失效
weixin_45894503的博客
04-20 1258
问题场景 例：在el-input中先输入中文字符,再输入数字,v-model失去监听 <el-input v-model="ruleForm.refundMoney" disabled="disabled" :placeholder="`本次可以退款最高${dataList.canRefundAmount}美元`" oninput="value=value.replace(/[^0-9.]/g,'')" clearable/> 原因分析： v-model本
vue用v-model绑定的input，直接在js里.value赋值无效
weixin_65635437的博客
07-11 1609
vue用v-model绑定的input，直接在js里.value赋值无效
vue element-ui 绑定@keyup事件无效的解决方法
08-27
所以，当你在`el-input`上添加`.native`修饰符时，`@keyup`事件会被绑定到输入框的底层`<input>`元素上，而不是Element-UI组件本身。这样，你的事件处理器就能正确地响应键盘抬起事件了。 具体实现如下： ```html ...
element-ui el-input不生效
08-15
Element-UI是一个流行的基于Vue.js的前端组件库，其中`el-input`是用于创建各种输入元素如文本框、密码输入、搜索框等的基本组件。如果在使用过程中遇到`el-input`组件失效的情况，可能有以下几个原因： 1. **未...
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题
最新发布
04-29
好的，我需要解决用户在使用Element-UI的输入建议框时遇到的空白问题和显示上一次输入建议的问题。首先，我得回忆一下Element-UI的Autocomplete组件的工作原理。通常，这类问题可能跟数据加载的异步处理或者组件状态...
el-input限制输入数字和小数的实现方法
此外，还可以结合`v-model`进行双向绑定，在处理完合法字符后将结果重新赋给数据模型，从而实现动态过滤。这种方式的优势在于可扩展性强，便于后期维护和功能增强，特别适合大型项目或需要精细化控制输入行为的业务...
el-input-number直接在输入框输入内容v-model的值不会跟着改变 问题
小猪的博客
07-16 3055
有一个需求就是，只能输入一个大于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'
Vue3 + Directive input元素绑定指令后，在指令中更新input value，v-model未生效
jiaweiliao的博客
01-17 3940
v-model未生效其实（:value绑定的变量未更新）其实就是在指令中改变输入框value时未触发“@input”事件，导致v-moel未生效。可利用dispatchEvent方法收到触发input事件，使v-model生效，更新变量。
增加input输入校验，v-model失效问题
m0_52113402的博客
11-24 5031
项目使用vue+element开发，业务场景就是一个el-input输入框只能输入正整数 // 最开始想的比较简单(如下写法) <el-form :rules="rules" :model="form" > <el-form-item label="账号" prop="account"> <el-input v-model.number="form.account" /> </el-form-item> </
vue element 使用 oninput方法 v-model失效，值为 ‘’，无法绑定
Passerby_K的博客
01-06 2469
效果图： <el-input v-model.number='scope.row.stock' size="small" maxlength="3" show-word-limit oninput="value=value.indexOf('.') > -1?value.slice(0, value.indexOf('.') + 0):value.slice(0,3)" @blur="scope.row.stock=Number($event.target.value) "
vue input验证输入格式非数字删除
weixin_55103282的博客
11-09 1077
使用vue自定义指令 1.封装自定义指令 Vue.directive('numberOnly', { bind: function (el) { el.handler = function () { undefined el.childNodes[1].value = el.childNodes[1].value.replace(/\D+/g, ''); //因为是elementui组件里使用的el.value获取不到我们输入的内容。然后我发现他的第一个孩子才是我们输入的手机号码的内
vue使用动态渲染v-model输入框无法输入内容
weixin_30667649的博客
03-21 906
最近使用ElementUI框架，在动态渲染表单的时候，表单框无法输入内容，但是绑定model的数据是会发生变化 解决方法： 将动态生成的表单对象，深拷贝到data对象中 <el-date-picker v-model="schemeRulesForm[item.names[0]]" type="date" placeholder="选择日期"></el-d...
uni-app使用input框 v-model双向绑定不起作用解决方案
weixin_37654372的博客
07-12 2497
uni-app使用input框 v-model双向绑定不起作用解决方案
vue的elementui的input输入框在使用了oninput后，v-model失效问题与解决方案
weixin_41575023的博客
07-08 7651
首先在网上找了很多都是说oninput在vue下失效，必须得这样写 v-on:input，但是我直接使用oninput是可以使用的，但这样直接写oninput="value=value.replace(正则表达式,' ')" 的话，v-model绑定的值是为空的，所以我想到了个简单的解决办法。 代码如下 <el-input class="aatss_input aatss_width_195" id="dia_country" v-on:input="checkCountry" v-model
关于VUE中v-model响应式失效的问题
weixin_43966996的博客
03-28 759
VUE中v-model响应式失效
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值