Vue.js with Firebase | 易学教程

问题

I'm trying to create a simple read/write app with Vue.js, VueFire and 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>

And my .js file is:

// 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 () {}
    }
  }
})

I get an error where firebase is not recognized. I don't get why is that. VueFire is imported so that should work, right?

回答1:

Change the order of the script tags so that anything your custom js depends on comes before it.

Using script tags in an html doc attaches all references to the global window object, but the order in which the tags appear is the order in which they are made available. You are referencing window.firebase before it exists.

来源：https://stackoverflow.com/questions/40329931/vue-js-with-firebase

标签

firebase

firebase-realtime-database

Vue.js