Est-ce que Vue.JS fonctionne avec les appels HTTP AJAX?

Question

Je suis en train de faire ce qui suit de mon 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); 
      }); 
     } 
     } 
    }); 

Fondamentalement, l'utilisateur appuie sur le bouton de connexion, la méthode est appelée OnLogin qui envoie un message à mon API. La publication fonctionne correctement et j'obtiens la réponse dans la promesse .then().

Mais, en essayant de faire des choses comme this.isLoggedIn = true; ne met pas à jour mon DOM avec ce que j'attends le code HTML à faire lorsque l'utilisateur se connecte à.

Peut-être que je suis en quelque sorte de fil de fond (désolé, développeur mobile ici) quand je reçois la réponse dans la promesse et il ne peut pas trouver l'instance "vm"?

Merci

Answer 1

Il se passe probablement parce que votre this ne pointe pas pour corriger la portée, la portée de ce change à l'intérieur d'un appel $.ajax, il vous suffit de faire quelque chose comme ce qui suit:

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

I proposerait une autre méthode utilise ES6 Arrow Functions comme '=>'. Il est simple et ne pas besoin variable.Like supplémentaire suivant:

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

Vous pouvez jeter un oeil à axios. J'ai utilisé $ .ajax et l'ai fait fonctionner, mais j'ai trouvé des axios et j'ai préféré les axios sur la librairie ajax.