我正在尝试通过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。
this.isLoggedIn = true;
当我在promise中收到响应并且找不到“ vm”实例时,可能是我处于某种后台线程(对不起,这里是移动开发人员)?
谢谢
发生这种情况的原因可能是您this没有指向正确的范围,而是在$.ajax调用中更改了范围,因此您只需要执行以下操作即可:
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); }); } }