记录一下uni-app输入框input的@input事件失效问题

今天开发中遇到一个Bug,input的@input事件竟然时而触发时而失效,先来看看我的代码:
HTML:

<input
 @input="changeNumber"
  type="number"
  v-model="orderForm.number"
  placeholder="请输入1 ~ 99的整数"
/>

JS:修改前

changeNumber(e) {
      let num = Number(e.detail.value);
      if (num === 0 || num === "") {
        num = 1;
      }
      if (num < 0) {
        num = 1;
      }
      if (num > 99) {
        num = 99;
      }
      this.orderForm.number = num.toFixed(0);
    },

JS:修改后 解决BUg

changeNumber(e) {
      let num = Number(e.detail.value);
      if (num === 0 || num === "") {
        num = 1;
      }
      if (num < 0) {
        num = 1;
      }
      if (num > 99) {
        num = 99;
      }
      setTimeout(() => { this.orderForm.number = num.toFixed(0) }, 0)
    },

这个BUg很奇怪,直接赋值属于同步,加了定时器就变成异步赋值了,具体原因不明确,个人猜测是因为同步赋值没有改变视图层,异步赋值视图层会刷新,个人愚见,有知道原因的大佬欢迎在下面留言纠正;
记录一下uni-app输入框input的@input事件失效问题_第1张图片

你可能感兴趣的:(uni-app,javascript,前端,开发语言,vue.js)