Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

183
Views
VueJS button click executes only second click

I have "Sign in with facebook" button in my webpage. everything working as expected but the problem is the action is triggered in second time of click. i cans ee error in console in first click.

HTML Code :

 <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>

JS code :

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

    }
      


Console error :

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

I'm getting this console error in the first click and the second time it works fine. I Think the error happens this line in first click.

window.FB.login(function(response) {

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

I think it's because on the first click,window.FB.login will be executed faster than this.initFacebook

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!