Vue.js与Firebase [英] Vue.js with Firebase
问题描述
我正在尝试使用Vue.js，VueFire和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>
我的.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是导入的，因此应该可以使用，对吧?
I get an error where firebase is not recognized. I don't get why is that. VueFire is imported so that should work, right?
推荐答案
更改脚本标记的顺序，以便您的自定义js所依赖的所有内容都在其之前.
Change the order of the script tags so that anything your custom js depends on comes before it.
在html文档中使用脚本标签会将所有引用附加到全局 window 对象，但是标签出现的顺序是使它们可用的顺序.您正在引用 window.firebase 之前.
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.
这篇关于Vue.js与Firebase的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
