-->

vue elementui input不能输入的问题

2020-11-30 05:53发布

在 vue  2.6.10 版本遇到了 首次进行编辑input 可以正常输入 但是再次进入不能正常输入,是因为我对input绑定的是对象内的变量,首次进入关闭之后我进行了对象的重置直接置为空对象,这样会导致这种错误的发生;

//template
<el-input v-model="myObj.input1"/>
<el-input v-model="myObj.input2"/>

//data里的数据 
myObj:{
    input1:"",
    input2: "",
}
//methods中在关闭时进行重置 reset 这种重置方式 导致上面的问题
reset(){
    myObj:{}
}

解决方法:

方案1:重置时 精确到对应的变量

reset(){
    myObj:{
        input1:"",
        input2: "",      
    }
}

方案2:给input绑定@input事件  有内容输入就实时更新视图 

<el-input v-model="myObj.input1" @input="updateView($event)" />
<el-input v-model="myObj.input2" @input="updateView($event)" />

//methods
updateView(e) {
    this.$forceUpdate()
}

方案3:绑定到input中的双向数据变量 不是对象内部的值就不会遇到这个问题

<el-input v-model="input1" @input="updateView($event)" />
<el-input v-model="input2" @input="updateView($event)" />

//data
 input1: "",
 input2: ""

  

标签: