javascript - 用户配置文件不会显示且无法更新：Firebase 和 VueJS

Question

我正在构建一个应用程序，在这个应用程序中我有一个个人资料页面。在此个人资料页面中，我想显示有关当前用户的信息，例如姓名，用户名，...我创建了一个firestore()通过用户 uid 获取用户集合的函数（因为我的用户集合与名称作为用户 uid）。当我启动我的应用程序时，什么都没有出现，当我想更新名称或用户名时，通过在输入中输入一些文本，我有一个错误。这个错误告诉我：

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'profile' of undefined"

found in

---> <Profile> at popup/components/profile/extension_userAccount.vue
       <ExtensionMainComponent> at popup/components/extension_mainComponent.vue
         <App> at popup/App.vue
           <Root>

TypeError: Cannot read property 'profile' of undefined
    at VueComponent.updateProfile (extension_userAccount.vue?../node_modules/babel-loader/lib!../node_modules/vue-loader/lib??vue-loader-options:258)
    at invokeWithErrorHandling (vue.runtime.esm.js:1853)
    at HTMLButtonElement.invoker (vue.runtime.esm.js:2178)
    at HTMLButtonElement.original._wrapper (vue.runtime.esm.js:6901)

但是当我console.log配置文件数组时，我显示了我的所有信息。

有我的account.vue页面：

<div>
  <h3>Name</h3>
  <input type="text" v-model="profile.name">
</div>
<div>
  <h3>Username</h3>
  <input type="text" v-model="profile.username">
</div>
<button @click="updateProfile">Modify</button>


<script>

import {fb,db} from '../../firebase/init'

export default {
    name: "profile",
    data() {
        return {
            profile: {
                name: null,
                username: null
            }
        }
    },

    firestore(){
        const user = fb.auth().currentUser;
        return {
            profile: db.collection('users').doc(user.uid),
        }
    },

    methods:
        updateProfile() {
            this.$firestore.profile.update(this.profile);
        }
    }
}
</script>

还有我的firebaseInit.js：

import * as firebase from "firebase/app";
import "firebase/firebase-auth";
import "firebase/firebase-firestore";

var firebaseConfig = {
    apiKey: "",
    authDomain: "",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "",
    measurementId: ""
};


const fb = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

export {fb,db}

如果有人可以帮助我;）

标签： javascriptfirebasevue.jsvuejs2google-cloud-firestore