Javascript 如何使用vue.js从promise中的方法更新数据值？

我的组件脚本是：

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";
        });
    }
  }
};

---

但是在catch内部，通过调试器，我可以看到值被设置。但是在我的模板中，validationFailed没有得到更新。我做错了什么？

这是Vue反应性问题。您需要将this.validationFailed分配给新对象。您可以在catch块中尝试ES6语法：

that.validationFailed = {
    ...that.validationFailed,
    createEmailField: 'something'
}

---

另一种方法是：this.$setthis.validationFailed，'createEmailField'，'something'；哪一个比较好？我想无论如何都可以。