我正在尝试使用 Vue.js、VueFire 和 Firebase 创建一个简单的读/写应用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>App</title>
<!-- Vue -->
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e3e0f0d5a7bba5bba6" rel="noreferrer noopener nofollow">[email protected]</a>/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 已导入，因此应该可以工作，对吗？
最佳答案
更改脚本标记的顺序，以便您的自定义 js 所依赖的任何内容都出现在它之前。
在 html 文档中使用脚本标记会将所有引用附加到全局 window 对象，但标记出现的顺序就是它们可用的顺序。您正在引用 window.firebase 之前的内容。
关于firebase - Vue.js 与 Firebase，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40329931/