uni-app 无法清空input,即无法更新 UI
2023-04-24 10:23 法子 阅读(871) 评论(0) 编辑 收藏 举报<input :value="inputValue" @input="handleInput"/>
handleInput ({detail}) { // 没有这一行会导致第二次无法清空 input this.inputValue = detail.value }, handleClickClear(key) { this.inputValue = '' },
现象:在 handleInput 中,如果不实时 this.inputValue = detail.value;那么第二次 handleClickClear 的时候,即使 this.inputValue = '',也无法让输入框中的值清空,即无法更新 UI。
原理::value="inputValue"只是对 input 赋初始值,所以第一次 this.inputValue = '' 的时候,this.inputValue改变了,触发 UI 更新;接着在 input 中输入值;第二次 this.inputValue = '' 的时候,因为没有实时更新 ,this.inputValue 的值还是上一次清空的 '',再为它赋同样的值就无法触发 UI 更新,input 中输入的值就无法清空。
常见错误:一般单一 input 的时候,大家都会在 handleInput 中为 this.inputValue 实时赋值,但是 for 循环中的 input ;由于要循环赋值,写起来麻烦,经常就会忘掉写,导致第二次清空无法刷新 UI。