代码改变世界

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。