526互联

element UI （input输入框clearable）不生效问题

发布时间 2023-11-16 17:51:56作者: seven(阿贞)

问题：

el-input 里自带了一个属性clearable，可以清楚输入框内容。但是有的时候清除无效，可能有如下情况：


1.clear删除无效，可以绑定clear事件解决，@clear="handleClear"；

html：
<el-form :label-position="labelPosition" label-width="100px" :model="form">
    <el-form-item label="备注：" class="item">
        <el-input v-model="remarks" placeholder="请输入备注信息" clearable @clear="handleClear"></el-input>
      </el-form-item>
</el-form>

js：
data(){
  return{
  　form：{}，
　　remark:'' } 
}，
method：{
　　handleClear（）{
　　　　this.remark=''
　　}
}
 

 


2.方法1还是无效，那就要排查内容块的框架属性，比如内嵌在form表单里：

<el-form :label-position="labelPosition" label-width="100px" :model="form">
    <el-form-item label="备注：" class="item">
        <el-input v-model="form.remarks" placeholder="请输入备注信息" clearable @clear="handleClear"></el-input>
      </el-form-item>
</el-form>

js:

data(){
  return{
     form:{remark:''}
  }  
}

 解决可以使用：

this.$set(this.form,this.form.remark,'')  

 调用方法：this.$set( target, key, value )

    target：要更改的数据源(可以是对象或者数组)

    key：要更改的具体数据

    value：重新赋的值


也可以换回第一种方式情况，不要套在form里也可以轻松清除。