[英]How can I update a data value from a method inside a promise with vue.js?
My component script is: 我的组件脚本是:
export default {
name: "Authenticate",
data: () => {
return {
validationFailed: {}
};
},
methods: {
validateForm() {
this.validationFailed = {};
if (this.createEmail.trim().length === 0) {
this.validationFailed.createEmailField = "Email cannot be blank. ";
}
if (this.createPassword.trim().length === 0) {
this.validationFailed.createPasswordField =
"Password cannot be blank. ";
}
if (Object.keys(this.validationFailed).length === 0) {
return true;
}
return false;
},
handleSubmit() {
const that = this;
axios
.request({
url: `${process.env.VUE_APP_API_URL}/users`,
method: "POST",
data: {
email: this.createEmail,
password: this.createPassword
}
})
.then(response => {
console.log(response);
})
.catch(err => {
that.validationFailed.createEmailField = "something";
});
}
}
};
But inside the catch, with a debugger
, I can see that the value gets set. 但是,在
debugger
,我可以看到该值已设置。 But in my template
, the validationFailed
doesn't get updated. 但是在我的
template
, validationFailed
不会更新。 What am I doing wrong? 我究竟做错了什么?
It's Vue reactivity problem. 这是Vue反应性问题。 You need to assign
this.validationFailed
to new object. 您需要
this.validationFailed
分配给新对象。 You can try ES6 syntax in catch block: 您可以在catch块中尝试ES6语法:
that.validationFailed = {
...that.validationFailed,
createEmailField: 'something'
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.