Estoy usando un inicio de sesión de Facebook y estoy mostrando el progreso de la carga para el usuario hasta que recibo una respuesta de Facebook para la autenticación. Pero solía ocultar la barra de progreso de esta manera.progress = false pero esta variable no está definida dentro de la función de ventana.
Mi código :
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) }; },No puedo establecer this.progress = false después de recibir todas las respuestas de Facebook.
Recibo un error mientras controlo la variable console.log(this.progress).
Error :
Login.vue?7463:175 undefined¿Cómo puedo configurar esta variable de progreso en falso una vez que se completan las comprobaciones de autenticación?
Intente convertir todas las llamadas de función () en llamadas de función de flecha () =>
El problema es que una function() romperá el alcance global de vue. Entonces, this no está disponible dentro de una llamada de function() , pero está disponible dentro de una función de flecha () => {}
En un ámbito de bloque (función () { sintaxis), esto está vinculado al ámbito anidado y no a esta instancia de vue. Si desea mantener vues this dentro de una función, use una función de flecha (ES6) o puede tener const that = this y diferir el global this a that en una función normal() { si lo prefiere de esta manera.
Intente usar este código convertido con funciones de flecha y vea si funciona:
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) }; },Lo sé porque acabo de tener el mismo problema :-) mira aquí: el complemento Nuxt no puede acceder a la instancia 'esta' de Vue en los bloques de funciones