Vue.JSはAJAX httpコールで動作しますか？私は私のHTMLから次の操作を実行しようとしています

：基本的にはユーザーがログインボタンを押したVue.JSはAJAX httpコールで動作しますか？私は私の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を更新しません。

は、申し訳ありません（私は、バックグラウンドスレッドのいくつかの並べ替えにいるということだろうモバイルデベロッパーはここにあります）、私は約束した応答を得て、 "VM"インスタンスを見つけることができません。

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

出典

2016-11-30 Felipe Caldas

は、それはおそらくあなたのthisは、スコープを修正するために指していないので、あなただけの、次のような何かをしなければならないので、これの範囲は、$.ajaxコール内で変更が起こっています'=>'のようなES6矢印関数を使用する別の方法を提案します。それはシンプルであり、次の余分なvariable.Likeを必要としません：

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

出典

2016-11-30 07:02:16 Saurabh

はい、それでした。スコープ！ありがとう=] –