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.target.value.replace(/[^0-9]/g, '')
      //   然后在每次keyup时把值赋给v-model
      if (!e.target.value) {
      
       // 这里给undefined是因为不给值就会默认变为1，不会为空，导致用户输入不了别的数值
        this.choose_quantity = undefined
      } else {
      
        this.choose_quantity = e.target.value
      }
    },
//  hover支付button时判断有没有填写数量
show_qr_area(){
      
          if (!this.choose_quantity) {
      
        this.$message({
      
          message: 'Quantity cannot be empty !',
          type: 'warning',
        })
        return false
      }
  }


},
}
script>

结束语

到这里就是我的此次需求的解决方案，记录下来，方便后续自己学习使用。