我无法将我的 Vuejs 应用程序连接到 Firebase

Question

我一直在尝试这样做一段时间，它正在影响我。阅读教程，每个人的做法都各不相同，所以运气不好。

我正在尝试将我的 Vue 应用程序连接到我的 Firebase 后端。

我有一个名为 Staff.vue 的组件，它有一个脚本：

<script>
import firebase from 'firebase'

export default {
  name: 'staff-list',

  data () {
    return {
      firebase.database().ref('employees').on('value').then((data) => {
        office.push(data);
      }).catch(
        (error) => {
          console.log(error);
        }
      ),
      // This will pull in the data from Firebase.
      office: []
    }
  }
}
</script>

我收到了错误：

Module build failed: SyntaxError: Unexpected token, expected , (30:14)

  28 |   data () {
  29 |     return {
> 30 |       firebase.database().ref('employees').on('value').then((data) => {
     |               ^
  31 |         office.push(data);
  32 |       }).catch(
  33 |         (error) => {

我还在我的 Main.js 文件中初始化了 firebase：

const config = {
  apiKey: "foo",
  authDomain: "bar",
  databaseURL: "foobar",
  projectId: "barfoo",
  storageBucket: "foobarfoo",
  messagingSenderId: "blarg"
};

firebase.initializeApp(config);

我不知道为什么它不起作用。请告诉我有人遇到了这个问题并且能够找出它为什么这样做以提供帮助。

提前致谢:)

Answer 1

您错误地尝试在返回的对象定义中执行代码。

从data 方法对象中提取该firebase 调用，并在created 生命周期挂钩中调用它（通过this.office 引用office 数组）：

data() {
  return {
    office: []
  }
},
created() {
  firebase.database().ref('employees').on('value').then((data) => {
    this.office.push(data);
  }).catch((error) => {
    console.log(error);
  });
}