uni-app 无法清空input,即无法刷新 UI

发布时间 2023-04-24 10:28:25作者: 法子
<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。