vue elementui input不能输入的问题

在 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: ""

参考:https://www.cnblogs.com/xhliang/p/11940418.html

posted @ 2020-09-05 21:48  haha-uu  阅读(924)  评论(0编辑  收藏  举报