Vue.js Facebook Войти - PullRequest
Новая
       7

Vue.js Facebook Войти

0 голосов
/ 23 сентября 2018

Я внедряю модуль входа в Facebook, который я уже импортировал, и он работает, но проблема возникает, когда я хочу связать ответ с входом.Как я мог достичь этого?Я вроде как с Vue.js

Я использую этот компонент

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>

Он отображает информацию в консоли, и это то, что я хочу привязать к входу.

1 Ответ

0 голосов
/ 23 сентября 2018

Вы можете использовать строковую интерполяцию в шаблонах Vue для отображения этого сообщения.

Сначала добавьте свойство data (например, с именем "message"): 

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

Затем добавьте message в шаблоне, заключив его в фигурные скобки: 

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

Когда будет определен результат входа в Facebook, установите this.message на нужное сообщение, аналогично следующему:

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