Vue.js Facebook 登录

Question

I'm implementing a Facebook Login module which I have already imported and it works, but the trouble comes when I want to bind the response to an input. How could I achieve it? I'm kinda new with Vue.js

I'm using this component

FbLogin.vue

 <template>
  <fb-signin-button
    :params="fbSignInParams"
    @success="onSignInSuccess"
    @error="onSignInError">
    Ingresa con 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('Error de fBlogin', error)
    },
  }
}
</script>

Form.vue

<template lang="pug">
  .field
    pm-fb
    label.label
      h1.sutitle
      .control
        input.input.is-hovered(type="text" v-model="username" placeholder="Nombre(s)") 
        input.input.is-hovered(type="text" placeholder="Apellido Paterno")
</template>

<script>
import PmFb from '@/components/fBLogin.vue'
export default {
  components: {
    PmFb
  }
}
</script>

It displays the info in the console and that's what I want to bind to the input.

Answer 1

You could use string interpolation in Vue templates to display that message.

First, add a data property (eg, named "message"):

export default {
  data() {
    return {
      message: ''
    };
  }
}

Then, add the message in your template, surrounded by curly brackets:

<template>
  <div>{{message}}</div>
</template>

When your Facebook login result is determined, set this.message to the desired message, similar to this:

methods: {
  onSignInSuccess (response) {
    FB.api('/me', dude => {
      this.message = `Good to see you, ${dude.name}.`
    })
  },
  onSignInError (error) {
    this.message = `Error de fBlogin: ${error}`
  },
}