Vue form表单input框 手动赋值未生效
前言在VUE项目开发过程中，遇到一个很奇怪的表单赋值问题，赋值为生效，而当遇到下拉框切换时，上一个值显示出来了。定位问题1、在data中只定一个formData对象，其中有20多个表单项未定义2、当后端数据返回时，前端直接赋值，未生效，采用$forceupdate()解决了问题3、但是又偶然遇到另一个问题，就是必须下拉框变化时才更新数据。原因原因：如果在实例创建之后添加新的属性到实例上（赋值），它
·
前言
在VUE项目开发过程中，遇到一个很奇怪的表单赋值问题，赋值为生效，而当遇到下拉框切换时，上一个值显示出来了。
定位问题
1、在data中只定一个formData对象，其中有20多个表单项未定义
2、当后端数据返回时，前端直接赋值，未生效，采用$forceupdate()解决了问题
3、但是又偶然遇到另一个问题，就是必须下拉框变化时才更新数据。
原因
原因：如果在实例创建之后添加新的属性到实例上（赋值），它不会触发视图更新。
由此Vue实例创建时，表单属性名并未声明，因此Vue就无法对属性执行 getter/setter 转化过程，导致表单属性不是响应式的，因此无法触发视图更新。
解决方案：
第一种：
可以通过显示声明表单这个对象的属性来解决。
第二种：
将$forceupdate()改成$set()进行赋值
例如：this.$set(obj, key, value)
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献25条内容
所有评论(0)