试客网站 源码对高校网站建设的期待

记录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.$set：this.$set 是 Vue 提供的一个全局方法，它用于在对象上添加响应式属性。它接受三个参数：对象本身，要添加的属性名，以及属性的值。当使用 this.$refs.employeeInfo.validateField(res.type) 时，Vue 将会追踪这个新的属性，并且在更新时会触发视图的重新渲染。

元素校验的问题：在的情况中，Element UI 可能依赖于 Vue 的响应式系统来进行字段校验。因为直接对对象进行属性赋值时，Vue 并不知道这个变化，所以它也无法触发 Element UI 组件的校验。但是使用了 this.$set 方法后，Vue 就能够捕捉到这个变化，并且通知相关的组件进行更新和校验。

总结，使用this.$set方法可以告诉Vue有新的属性被添加进来了

更详细的vue响应式系统参考