Vue.js 与 Firebase答案

【问题标题】：Vue.js with FirebaseVue.js 与 Firebase
【发布时间】：2017-03-12 19:30:56
【问题描述】：

我正在尝试使用 Vue.js、VueFire 和 Firebase 创建一个简单的读/写应用程序。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>App</title>

  <!-- Vue -->
  <script src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
  <!-- VueFire -->
  <script src="https://cdn.jsdelivr.net/vuefire/1.1.0/vuefire.min.js"></script>
  <!-- Firebase -->
  <script src="https://www.gstatic.com/firebasejs/3.5.2/firebase.js"></script>

</head>

<body>
  <div id="app">
    <ul>
      <li v-for="story in stories">
        {{ story.body }}
      </li>
    </ul>
  </div>

  <script type="text/javascript" src="app.js"></script>
</body>
</html>

我的 .js 文件是：

// Initialize Firebase
var config = {
  apiKey: "*****************************",
  authDomain: "************.firebaseapp.com",
  databaseURL: "https://************.firebaseio.com",
  storageBucket: "",
  messagingSenderId: "***********"
};

var firebaseApp = firebase.initializeApp(config)
var db = firebaseApp.database()

var app = new Vue({
  el: '#app',
  props: ['stories']
  firebase: {
    anObject: {
      source: db,
      asObject: true,
      // optionally provide the cancelCallback
      cancelCallback: function () {}
    }
  }
})

我收到一个错误，firebase 无法识别。我不明白为什么会这样。 VueFire 是导入的，所以应该可以工作，对吧？

【问题讨论】：

标签： firebase firebase-realtime-database vue.js

【解决方案1】：

更改脚本标签的顺序，以便您的自定义 js 依赖的任何内容都在它之前。

在 html 文档中使用脚本标签会将所有引用附加到全局 window 对象，但标签出现的顺序是它们可用的顺序。您在 window.firebase 存在之前引用它。

【讨论】：

我失踪了；