Question

我正在尝试从我的HTML中执行以下操作：

var vm = new Vue({
      el: '#loginContent',
      data: {
        main_message: 'Login',
        isLoggedIn: false,
        loginError: '',
        loginButton:'Login'
      },
      methods: {
        onLogin: function() {
          //this.$set(loginSubmit, 'Logging In...');
          var data = {
            email: $('#email').val(),
            password: $('#password').val(),
          };
          $.ajax({
            url: '/api/login',
            data: data,
            method: 'POST'
          }).then(function (response) {
            if(response.error) {
              console.err("There was an error " + response.error);
              this.loginError = 'Error';
            } else {
              //$('#loginBlock').attr("hidden",true);
              console.log(response.user);
              if(response.user) {
                this.isLoggedIn = true;
              } else {
                this.loginError = 'User not found';
              }
            }
          }).catch(function (err) {
            console.error(err);
          });
        }
      }
    });

基本上用户按下登录按钮，调用onLogin方法向我的API发送帖子。帖子工作正常，我确实在.then（）承诺中得到了回复。

但是，尝试执行this.isLoggedIn = true;之类的操作并不会使用我希望HTML在用户登录时执行的操作来更新我的DOM。

当我在承诺中得到回复并且无法找到＆＃34; vm＆＃34;这可能是我在某种背景线程（抱歉，移动开发人员在这里）。实例

由于

Answer 1

可能会发生这种情况，因为this并未指向正确的范围，此范围在$.ajax调用中发生变化，因此您只需执行以下操作：

  methods: {
    onLogin: function() {
      //this.$set(loginSubmit, 'Logging In...');
      var data = {
        email: $('#email').val(),
        password: $('#password').val(),
      };
      var that = this
      $.ajax({
        url: '/api/login',
        data: data,
        method: 'POST'
      }).then(function (response) {
        if(response.error) {
          console.err("There was an error " + response.error);
          that.loginError = 'Error';
        } else {
          //$('#loginBlock').attr("hidden",true);
          console.log(response.user);
          if(response.user) {
            that.isLoggedIn = true;
          } else {
            that.loginError = 'User not found';
          }
        }
      }).catch(function (err) {
        console.error(err);
      });
    }
  }

Answer 2

我建议另一种使用ES6箭头函数的方法，比如'=＆gt;'。它很简单，不需要额外的变量。如下所示：

      $.ajax({
        url: '/api/login',
        data: data,
        method: 'POST'
      }).then((response) => {
        if(response.error) {
          console.err("There was an error " + response.error);
          this.loginError = 'Error';
        } else {
          //$('#loginBlock').attr("hidden",true);
          console.log(response.user);
          if(response.user) {
            this.isLoggedIn = true;
          } else {
            this.loginError = 'User not found';
          }
        }
      }).catch(function (err) {
        console.error(err);
      });

Answer 3

您可能需要查看axios。我使用了$ .ajax并使其工作，但找到了axios并且更喜欢Axios而不是ajax库。

Vue.JS是否可以使用AJAX http调用？

3 个答案: