el-input-number直接在输⼊框输⼊内容v-model的值不会跟着改变
前⾔
前提是element-ui版本为2.15.1及以下版本，因为说不定哪天element就会更新，解决这个问题
最近在开发项⽬中，有⼀个需求是在el-input-number组件中直接输⼊值，然后离开⿏标直接mouseenter其他的button，这个时候要获取v-model的值，发现v-model的值并不会改变，于是就开始折腾，查elementui的issure发现是因为el-input-number在封装时并没有将直接输⼊的值赋值给v-model，然后⾃⼰细想⼀下使⽤@keyup事件把输进去的值在给到v-model.
接下来是直接看代码，简单明了
因为el-input-number`是在失焦后才对input输⼊框进⾏校验，但是我在hover另⼀个button的时候，其实并没有失焦，所以这个时候v-model的值并没有改变，我需要另辟蹊径，就是在keyup的时候把这个值给到v-model这样就算是不失焦我也可以拿到改变后的v-model的值
<div class="size_select Quan_num_tity">
<el-input-number
v-model.number="choose_quantity"
:min="1"
:max="99"
:step="1"
step-strictly
@keyup.native="number_change($event)"
/>
</div>
<div class="Pay_immediately"@mouseenter.stop="show_qr_area($event)">扫描⼆维码⽴即⽀付</div>
<script>
export default{
data(){
return{
choose_quantity:1,//默认的选择购买的数
}
},
mounted(){},
methods:{
number_change(e){
//在输⼊的时候就要判断只能输⼊正整数
e.target.value = e.place(/[^0-9]/g,'')
//  然后在每次keyup时把值赋给v-model
if(!e.target.value){
// 这⾥给undefined是因为不给值就会默认变为1，不会为空，导致⽤户输⼊不了别的数值
this.choose_quantity = undefined
}else{
this.choose_quantity = e.target.value
}
input框禁止输入},
//  hover⽀付button时判断有没有填写数量
show_qr_area(){
if(!this.choose_quantity){
this.$message({
message:'Quantity cannot be empty !',
type:'warning',
})
return false
}
}
},
}
</script>
结束语
到这⾥就是我的此次需求的解决⽅案，记录下来，⽅便后续⾃⼰学习使⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。