Project scenario:
提示:这里简述项目相关背景:
Simple project example: a simple form submission
key value: (drop-down box) field platform
key value: (text box) field actaul_erison
key value: (text box) field actaul_erison2
project requirements
When a form needs to be modified and echoed, when the platform drop-down box changes, the values of actaul_erison and actaul_erison2 need to be cleared.
Limit the input of actaul_erison and actaul_erison2 according to the value selected by platform
Problem Description
At first I thought there was a supernatural event, it was really strange.
Viewing the network in the browser, you can clearly see that the (actaul_erison) field has returned a value. The
front-end axios response interceptor prints the result
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);
}
)
Problem analysis and solution:
Tip: Fill in the specific solution to the problem here:
Going back to the original requirement, platform clearing needs to clear the values of actaul_erison and actaul_erison2,
so I wrote a listener in vue, and did not use the @change event
watch: {
'obj.platform':function(newValue, oldValue){
if (newValue){
this.obj.actaul_erison = ''
this.obj.actaul_erison2 = ''
}
}
},
So the problem lies in this.
You cannot directly clear the value of the attribute in the listener.
When the obj.platform property changes, some properties are set to null, which may cause problems with the return value of the request.
It is very common to use watch to monitor property changes and then execute some logic, because this logic may affect subsequent asynchronous requests and data processing
Solution remove this code
Change to @change event to clear the values of actaul_erison and actaul_erison2