问题描述
使用vue框架开发,有时候会遇到在函数中改变了某个值,但在页面中没有及时刷新改变后的值。
页面展示
这里需要实现输入工号后,页面自动显示出与之对应的姓名、所属部门、所属单位以及所属岗位。但在输入工号后,这些信息都没有马上显示出来,而是在选择了异常类型后,这些数据才显示在页面上。
解决
上述问题可以使用this.$forceUpdate()强制刷新,解决页面不会重新渲染的问题。这样在输入工号后,页面将自动显示相关信息。代码如下:
// 工号改变时获取信息
jobNumChange (data) {
console.log('工号', data.srcElement.value)
const Num = data.srcElement.value
//请求信息
unfinishedReason.findByUserDemo(Num).then(res => {
if (res.data.personName !== null) {
this.formItem.personName = res.data.personName
}
if (res.data.deptCode !== '') {
this.formItem.deptCode = res.data.deptCode
}
if (res.data.unitCode !== '') {
this.formItem.unitCode = res.data.unitCode
}
if (res.data.post !== '') {
this.formItem.post = res.data.post
}
this.$forceUpdate() //强制刷新
})
}