VueJS this.进程在窗口函数内是未定义的

Question

我正在使用Facebook登录，我正在为用户显示进度加载，直到我从Facebook获得响应以进行身份验证。但我以前是这样隐藏进度条的。Progress = false，但该变量在窗口函数中未定义。

我的代码:

initFacebook() {
this.progress=true
window.fbAsyncInit = function() {
window.FB.init({
appId: "MY-APP-ID", //You will need to change this
cookie: true, // This is important, it's not enabled by default
version: "v2.6",
status: false,
});

window.FB.login(function(response) {

if (response.status === 'connected'){
window.FB.api('/me?fields=id,name,email', function(response) {
console.log( response) // it will not be null ;)
})

} else {
console.log("User cancelled login or did not fully authorize.")         
}
},

{scope: 'public_profile,email'}
);
this.progress = false
console.warn(this.progress)
};
},

我无法设置这个。收到Facebook的所有回复后，progress = false

我在console.log(this.progress)变量时得到一个错误。

错误:

Login.vue?7463:175 undefined

我如何设置这个。一旦身份验证检查完成，进度变量为false ?

Answer 1

尝试将所有函数()调用转换为箭头函数调用()=>

问题是function()将打破全局值范围。因此，值this在function()调用中不可用，但它在箭头函数() => {}中可用

在块作用域(function() {syntax)中，this被绑定到嵌套作用域，而不是value的这个实例。如果你想在函数中保留this值，可以使用箭头函数(ES6)，或者你可以使用const that = this，并将全局this延迟到常规函数(){中。

试着用箭头函数转换一下这段代码，看看它是否有效:

initFacebook() {
this.progress=true
window.fbAsyncInit = () => {      
window.FB.init({
appId: "MY-APP-ID", //You will need to change this
cookie: true, // This is important, it's not enabled by default
version: "v2.6",
status: false,
});
window.FB.login((response) => {            
if (response.status === 'connected'){
window.FB.api('/me?fields=id,name,email', (response) => {
console.log( response) // it will not be null ;)
})     
} else {
console.log("User cancelled login or did not fully authorize.")
}
},      
{scope: 'public_profile,email'});
this.progress = false
console.warn(this.progress)
};
},

我知道这是因为我刚刚遇到了同样的问题:-)见这里:next插件无法访问Vue's 'this'函数块中的实例