自学做网站,平台运营的主要工作内容,wordpress 复杂表单,免费素材哪个网站比较好记录vue开发中遇到的问题 - 2023/10/16 问题#xff1a;项目element-ui表单中#xff0c;input点击需要打开弹框#xff0c;弹框选择值后回填到input#xff0c;但是此时elementUI的校验出错#xff08;值存在却校验为空#xff09;
解决方法#xff1a; this.employee… 记录vue开发中遇到的问题 - 2023/10/16 问题项目element-ui表单中input点击需要打开弹框弹框选择值后回填到input但是此时elementUI的校验出错值存在却校验为空
解决方法 this.employeeInfo[res.type] res.value; 改为 this.$refs.employeeInfo.validateField(res.type)
原因分析
这是一个关于Vue的响应式系统的问题。
Vue的响应式系统Vue使用了响应式的数据绑定来实现数据和DOM之间的自动同步。当直接给一个对象添加一个新的属性时Vue无法检测到这个改变因为Vue在实例化时会对数据进行一次“初始化”之后只能检测已经初始化的属性的变化。这也就是为什么使用了this.employeeInfo[res.type] res.value但是Vue并没有触发更新。这种情况下需要使用this.$set来告诉Vue这个属性已经被更新了。
this.$setthis.$set 是 Vue 提供的一个全局方法它用于在对象上添加响应式属性。它接受三个参数对象本身要添加的属性名以及属性的值。当使用 this.$refs.employeeInfo.validateField(res.type) 时Vue 将会追踪这个新的属性并且在更新时会触发视图的重新渲染。
元素校验的问题在的情况中Element UI 可能依赖于 Vue 的响应式系统来进行字段校验。因为直接对对象进行属性赋值时Vue 并不知道这个变化所以它也无法触发 Element UI 组件的校验。但是使用了 this.$set 方法后Vue 就能够捕捉到这个变化并且通知相关的组件进行更新和校验。
总结使用this.$set方法可以告诉Vue有新的属性被添加进来了
更详细的vue响应式系统参考
