Vue.js Facebook登录

Question

我正在实施一个我已经导入的Facebook登录模块，它可以工作，但是当我想将响应绑定到输入时，就会遇到麻烦。我怎么能实现它？我对Vue.js有点新意

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

它在控制台中显示信息，这就是我想要绑定到输入的内容。

Answer 1

您可以在Vue模板中使用string interpolation来显示该消息。

首先，添加一个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}`
  },
}