Does Vue.JS work with AJAX http calls?

It is probably happening because your this is not pointing to correct scope, scope of this changes inside an $.ajax call, so you just have to do something like following:

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

Leave a Comment