项目场景:
提示:这里简述项目相关背景:
项目简单示例:一个简单表单提交
关键值:(下拉框) 字段platform
关键值:(文本框) 字段actaul_erison
关键值:(文本框) 字段actaul_erison2
项目需求
需要对一个表单完成修改,和回显,platform的下拉框变动的时候,需要清空actaul_erison和actaul_erison2的值,
根据platform选择的值限制actaul_erison和actaul_erison2的输入
问题描述
起初我还以为出现了一个灵异事件,真的太奇怪了
浏览器查看network,可以清楚看见这个(actaul_erison)字段是返回了值
前端axios response拦截器打印结果
axios.interceptors.response.use(
response => {
const res = response.data
// 在这里打印的res
// 这个字段在这里(actaul_erison)返回了”“ 空字符串
// 所以很奇怪。。。
},
error => {
if (error.response.data.message) {
Message({
message: error.response.data.message,
type: 'error',
duration: 5 * 1000
})
} else {
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
}
return Promise.reject(error);
}
)
问题分析和解决方案:
提示:这里填写该问题的具体解决方案:
回到最初需求,platform清除需要清除actaul_erison和actaul_erison2的值
所以我在vue写了一个监听器,并没有用@change事件
watch: {
'obj.platform':function(newValue, oldValue){
if (newValue){
this.obj.actaul_erison = ''
this.obj.actaul_erison2 = ''
}
}
},
所以问题就出在这
不能在监听里面直接清除属性的值
obj.platform 属性变化时将一些属性置为空,从而可能导致请求的返回值出现问题。
在 watch 中使用来监听属性的变化,然后执行一些逻辑是很常见的做法,由于这个逻辑可能会影响到后续的异步请求和数据处理
解决办法删除这个代码
改为@change事件来清除actaul_erison和actaul_erison2 的值