el-input输入框使用oninput或onkeyup后,v-model双向绑定失效问题

本文介绍了一种解决在使用Vue.js框架时,中文输入导致v-model绑定值变为空字符串的问题。通过在el-input组件中加入特定指令,确保即使在输入中文后,也能正常赋值数字,并保持数据绑定的一致性。

在输入中文触发oninput后,v-model绑定的值会被设成空字符串,这时候再输入数字,v-model绑定的值不会被赋值,一直为空。解决方法可以用blur手动给绑定的值赋值。

<el-input
   v-model="form.account"
   clearable
   placeholder="请输入手机号"
   onkeyup="value=value.replace(/[^\d]/g,'')"
   @blur="form.account = $event.target.value"
 ></el-input>

重点就在于 $event.target.value

$event介绍

$event是指当前触发的是什么事件(鼠标事件,键盘事件等)
$event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素

注意:$event是VUE的特殊变量,用于访问原生 DOM 事件, $event 只能作为方法参数被传入。

<input @blur="getData($event)"></input>
<script>
export default {
	name:'',
	title:'',
	data() {
        return {
            tableShowSenior: false,
            tableOptionSenior: {}
        }
    },
    methods: {
		getData(e){
			alert(e.target.value);
		}
	}
}
</script>

处理兼容问题:

getData(e){
	e = e || window.event;
	alert(e.target.value);
}

可以看出$event也可以通过window.event的方式获取。

评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值