解决el-input输入框赋值后不能编辑的问题

2,172 阅读1分钟

一、问题:

element-ui库中的el-input,进入页面拿到初始值赋值给input,后续却无法修改input的值

image.png

二、原因:

出现这个问题的本质在于Vue无法监听data中新增的属性和删除属性,解决办法要么把属性在对象中罗列出来,要么通过Vue.set新增属性或者 Vue.delete删除属性

三、方法:

方案一: 在data中给input的值赋一个初始值

data(){
 return {
   ruleForm: {
           concernMember: 0
      },
 }
}

方案二: 在给input赋值时,使用this.$set (强推)

this.$set(this.ruleForm, "concernMember", "想要修改后的值");