Does Vue.JS work with AJAX http calls?

Question

I am trying to do the following from my HTML:

var vm = new Vue({
      el: \'#loginContent\',
      data: {
        main_message: \'Login\',
        isLogged         


        

Answer 1

I would propose another method use ES6 Arrow Functions like '=>'. It is simple and do not need extra variable.Like following:

      $.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 2

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

Answer 3

You might want to take a look at axios. I used $.ajax and got it working, but found axios and prefer axios over the ajax library.