vue中表单赋值无法响应式，输入框无法改变值

您所在的位置：网站首页 › js修改form的值 › vue中表单赋值无法响应式，输入框无法改变值

vue中表单赋值无法响应式，输入框无法改变值

2023-12-25 13:10| 来源: 网络整理| 查看: 265

开发中碰到，使用element-ui输入框时无法赋值，输入无反应原因： 1.细节性错误

使用el-form标签时，其中的el-form-item对应的prop属性值，v-model绑定值，data对象中的字段值三者出现不一致

代码示例

html:

js:

data(){ return { form:{ name:'' } } } 2.语法错误

还有一种情况就是，当我们的表单需要绑定是字段太多，我们没有直接将初始化字段在表单对象中写好，而是使用空对象进行代替

代码：

//正常情况 data(){ return { form:{ name:'', age:'', sex:'' //......等更多属性 } } } //直接采用空对象初始化 data(){ return { form:{} } }

上面的情况，当你通过this.form.name='张三',去赋值时，虽然赋值可以成功，但是当你在el-input的输入框内输入时，是不起作用的

原因是，我们直接采用了空对象初始化的形式，来初始化对象，这样对象中的字段在赋值的时候是不存在响应式的

解决办法：

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

可以通过this.$set()的方式来将对象进行响应式的赋值

this.$set()方法中:

第一个参数是你需要设置data中的属性的外层，这里我要设置的是data中的form，按照原来的赋值写法就是this.form='xx',那么form的外层就是this,第二个参数就是你要设置的具体对象，注意使用字符串的形式，这里我要对form属性进行设置，需要就填写form第三个参数就是相当于你要设置的实际值

对应起来就是 this.from.name='mike' ==> this.$set(this.form,'name','mike')

【本文地址】

vue中表单赋值无法响应式，输入框无法改变值

vue中表单赋值无法响应式，输入框无法改变值

今日新闻

推荐新闻