今天开发中遇到一个Bug,input的@input事件竟然时而触发时而失效,先来看看我的代码:
HTML:
<input&#64;input&#61;"changeNumber"type&#61;"number"v-model&#61;"orderForm.number"placeholder&#61;"请输入1 &#xff5e; 99的整数"
/>
JS&#xff1a;修改前
changeNumber(e) {let num &#61; Number(e.detail.value);if (num &#61;&#61;&#61; 0 || num &#61;&#61;&#61; "") {num &#61; 1;}if (num < 0) {num &#61; 1;}if (num > 99) {num &#61; 99;}this.orderForm.number &#61; num.toFixed(0);},
JS&#xff1a;修改后 解决BUg
changeNumber(e) {let num &#61; Number(e.detail.value);if (num &#61;&#61;&#61; 0 || num &#61;&#61;&#61; "") {num &#61; 1;}if (num < 0) {num &#61; 1;}if (num > 99) {num &#61; 99;}setTimeout(() &#61;> { this.orderForm.number &#61; num.toFixed(0) }, 0)},
这个BUg很奇怪&#xff0c;直接赋值属于同步&#xff0c;加了定时器就变成异步赋值了&#xff0c;具体原因不明确&#xff0c;个人猜测是因为同步赋值没有改变视图层&#xff0c;异步赋值视图层会刷新&#xff0c;个人愚见&#xff0c;有知道原因的大佬欢迎在下面留言纠正&#xff1b;