最近我一直在玩Vue.js
和Firestore
,我发现了一个很棒的插件可以使我的生活更轻松,尽管它确实涉及到链接到我的Firestore数据库的代码较少,但是这使我的生活变得非常美好遇到undefined
错误非常困难。
我所拥有的非常简单:
App.vue:
<template> <div id="app"> <Projects></Projects> </div> </template> <script> import Projects from './Projects'; export default { name: 'app', components: { Projects }, data() { return {} } } </script> <style></style>
Projects.vue:
<template> <div id="projects"> <h1>Hi</h1> <p v-for="project in projects" :key="project.project_id">{{ project.title }}</p> </div> </template> <script> import db from './main' export default { name: 'projects', data() { return { projects: [], } }, async mounted() { this.projects = await db.collection('projects').get() } } </script> <style></style>
Main.js:
import 'babel-polyfill'; import Vue from 'vue' import App from './App.vue' // Firebase Imports import Firebase from 'firebase/app' import 'firebase/firestore' import { firestorePlugin } from 'vuefire' // Use Plugins Vue.use(firestorePlugin) // Initialize Firebase Configuration var firebaseConfig = { apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxx", authDomain: "xxxxxxxxxxxx.firebaseapp.com", databaseURL: "https://xxxxxxxxxxxx.firebaseio.com", projectId: "xxxxxxxxxxxx", storageBucket: "xxxxxxxxxxxx.appspot.com", messagingSenderId: "xxxxxxxxxxxx", appId: "xxxxxxxxxxxx" } const firebaseApp = Firebase.initializeApp(firebaseConfig) export const db = firebaseApp.firestore() new Vue({ el: '#app', render: h => h(App) })
运行该应用程序时,我的控制台出现以下错误:
[Vue warn]: Error in mounted hook (Promise/async): "TypeError: Cannot read property 'collection' of undefined" found in ---> <Projects> at src/Projects.vue <App> at src/App.vue <Root>
vue.esm.js?efeb:1897 TypeError: Cannot read property 'collection' of undefined at VueComponent._callee$ (Projects.vue?8816:19) at tryCatch (runtime.js?a466:65) at Generator.invoke [as _invoke] (runtime.js?a466:303) at Generator.prototype.<computed> [as next] (runtime.js?a466:117) at step (146:2) at eval (146:2) at new Promise (<anonymous>) at eval (146:2) at VueComponent.mounted (Projects.vue?8816:18) at invokeWithErrorHandling (vue.esm.js?efeb:1863)
[如果有人有经验,可以阐明为什么我是我的代码中的大人物,那将非常感谢!
最近我一直在使用Vue.js和Firestore,并且我发现了一个很棒的插件可以使我的生活更轻松,尽管它确实涉及到链接到我的Firestore数据库的代码较少,但它一直使我的生活变得更加轻松...] >
在main.js
文件中,您应该执行以下操作:
Firebase.initializeApp(firebaseConfig)
export const db = firebase.firestore()