<input :value="inputValue" @input="handleInput" @clear="handleClickClear"/>
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 的时候,大家都会在 handleInput 中为 this.inputValue 实时赋值,但是 for 循环中的 input ;由于要循环赋值,写起来麻烦,经常就会忘掉写,导致第二次清空无法刷新 UI。