Tengo el botón "Iniciar sesión con Facebook" en mi página web. todo funciona como se esperaba, pero el problema es que la acción se activa en la segunda vez que se hace clic. Puedo ver un error en la consola en el primer clic.

Código HTML :

 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <button type="button" v-on:click="logInWithFacebook" class="btn-facebook"><i class="fa fa-facebook"></i>Facebook</button> </div>

Código JS:

 <script> import axios from 'axios' export default { name:"Login", data() { return { email:'', password:'', progress:false, disabled:false, emailError:null, passwordError:null, error:null, } }, methods: { async initFacebook() { window.fbAsyncInit = function() { window.FB.init({ appId: "615100826501510", //You will need to change this cookie: true, // This is important, it's not enabled by default version: "v2.6" }); }; }, async logInWithFacebook() { this.progress=true await this.loadFacebookSDK(document, "script", "facebook-jssdk"); await this.initFacebook(); 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 ;) this.progress = false }) } else { alert("User cancelled login or did not fully authorize."); } }, {scope: 'public_profile,email'} ); return false; }, async loadFacebookSDK(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) { return; } js = d.createElement(s); js.id = id; js.src = "https://connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); } }

Error de consola:

 vue.runtime.esm.js?2b0e:1897 TypeError: Cannot read properties of undefined (reading 'login')

Recibo este error de consola en el primer clic y la segunda vez funciona bien. Creo que el error ocurre en esta línea en el primer clic.

 window.FB.login(function(response) {