VueJS Axios 发布请求 - 无法更新数据绑定

Question

我正在尝试使用以下方法更新我的 VueJS 页面。为了演示它在哪里工作以及在哪里不工作，我在下面添加了解释，但我被困住了如何绑定数据。

<script>
      window.app = new Vue({
        el: '#app',
        data: {
          form: {
            email: '',
            password: ''
          },
          token: ''
        },
        methods: {
          onSubmit(e) {
                  e.preventDefault();
                  this.token = "This works!"
                  // alert(JSON.stringify(this.form))
                  axios.post('http://localhost:5000/login', {
                      username: this.form.email,
                      password: this.form.password
                  })
                  .then(function (response) {
                      // this.token = response.data.access_token
                      this.token = "This does not work!"
                      console.log(response);
                  })
                  .catch(function (error) {
                      console.log(error);
                  });
          },
          onReset(e) {
            e.preventDefault()
            // Reset our form values
            this.form.email = ''
            this.form.password = ''
          }
        }
      })
    </script>

Answer 1

this.token 内部函数不是 Vuejs 实例。你应该为它使用箭头功能

onSubmit(e) {
    e.preventDefault();
    this.token = "This works!"
    axios.post('http://mydomain/login', {
        username: this.form.email,
        password: this.form.password
    })
    .then((response) => {
        this.token = "This does not work!"
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
}