• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

凉梁凉糕

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

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

  

posted on 2019-11-27 10:44  凉梁凉糕  阅读(10671)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3