I've successfully integrated a Facebook Login module in my project and it's working well. However, I'm facing difficulties when trying to link the response data with an input field. Can someone guide me on how to achieve this? I'm still new to Vue.js.
The component I am using can be found here.
FbLogin.vue
<template>
<fb-signin-button
:params="fbSignInParams"
@success="onSignInSuccess"
@error="onSignInError">
Log in with FB
</fb-signin-button>
</template>
<script>
export default {
data () {
return {
fbSignInParams: {
scope: 'email,user_likes',
return_scopes: true,
},
}
},
methods: {
onSignInSuccess (response) {
FB.api('/me', dude => {
console.log(`Good to see you, ${dude.name}.`)
})
},
onSignInError (error) {
console.log('FB login error', error)
},
}
}
</script>
Form.vue
<template lang="pug">
.field
pm-fb
label.label
h1.subtitle
.control
input.input.is-hovered(type="text" v-model="username" placeholder="First Name")
input.input.is-hovered(type="text" placeholder="Last Name")
</template>
<script>
import PmFb from '@/components/fBLogin.vue'
export default {
components: {
PmFb
}
}
</script>
I want to display the fetched information in the console and then bind it to the input field.