无法传递、访问或预填充数据 - Vue.js / Firestore

Question

我想弄清楚我在这里缺少什么。 我正在尝试为用户个人资料页面预先填写一些数据。 该预填充数据来自 Firestore 数据库集合。 在编辑请求时，我已经能够预填充现有字段，但是，我在用户个人资料部分感到困惑。 我已经包含了一个视频链接，该视频显示了我所看到的。 这也是我得到的一个错误：

vue-firestore.js?73c3:1 Uncaught (in promise) Error: This document (profile) is not exist or permission denied.
    at Object.eval [as next] (vue-firestore.js?73c3:1)
    at next (index.cjs.js?e89a:21048)
    at eval (index.cjs.js?e89a:19341)

我的问题视频

我相信我遇到了以下文件之一的问题。 如果需要，我可以提供更多信息。

登录.vue

 <template> <div class="login"> <.-- Modal --> <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginTitle" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-body"> <ul class="nav nav-fill nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true">Login</a> </li> <li class="nav-item"> <a class="nav-link" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false">Signup</a> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab"> <h5 class="text-center">Login Please</h5> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" v-model="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"> <small class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" @keyup,enter="login" v-model="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="form-group"> <button class="btn btn-primary" @click="login">Login</button> </div> </div> <div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab"> <h5 class="text-center">Create New Account</h5> <div class="form-group"> <label for="name">Your name</label> <input type="text" v-model="name" class="form-control" id="name" placeholder="Your nice name"> </div> <div class="form-group"> <label for="email">Email address</label> <input type="email" v-model="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" v-model="password" class="form-control" id="password" placeholder="Password"> </div> <div class="form-group"> <button class="btn btn-primary" @click="register">Signup</button> </div> </div> </div> </div> </div> </div> </div> </div> </template> <script> import {fb. db} from '.:/firebase' export default { name, "Login": props: { msg, String }: data(){ return { name, null: email, null: password, null } }: methods.{ login(){ fb.auth().signInWithEmailAndPassword(this,email. this.password).then(() => { $('#login').modal('hide') this.$router;replace('admin'). }).catch(function(error) { // Handle Errors here. var errorCode = error;code. var errorMessage = error;message. if (errorCode === 'auth/wrong-password') { alert('Wrong password;'); } else { alert(errorMessage). } console;log(error); }), }. register(){ fb.auth().createUserWithEmailAndPassword(this,email. this.password).then((user) => { $('#login').modal('hide') // Add a new document in collection "profiles" db.collection("profiles").doc("user.user.uid"):set({ name. this,name. }).then(function() { console;log("Document successfully written."). }):catch(function(error) { console,error("Error writing document; "; error). }). this;$router.replace('admin'). }).catch(function(error) { // Handle Errors here; var errorCode = error.code; var errorMessage = error.message; if (errorCode == 'auth/weak-password') { alert('The password is too weak;'). } else { alert(errorMessage); } console;log(error); }); } } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> </style>

这是 Profile.vue

 <template> <div class="profile"> <div class="container"> <div class="intro h-100"> <div class="row h-100 align-items-center"> <div class="col-md-6 ml-3"> <h3>Profile settings</h3> <p> Change your profile settings here </p> </div> <div class="col-md-5"> <img src="/img/svg/profile.svg" width="300" alt="" class="img-fluid"> </div> </div> </div> <div class="profile-content"> <ul class="nav nav-pills ml-3" id="myTab" role="tablist"> <li class="nav-item"> <a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a> </li> <li class="nav-item"> <a class="nav-link" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="false">Account settings</a> </li> </ul> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active pt-3" id="profile" role="tabpanel" aria-labelledby="profile-tab"> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="form-group"> <input type="text" name="" v-model="profile.name" placeholder="Full name" class="form-control"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" v-model="profile.phone" placeholder="Phone" class="form-control"> </div> </div> <div class="col-md-12"> <div class="form-group"> <input type="text" v-model="profile.address" placeholder="Address" class="form-control"> </div> </div> <div class="col-md-8"> <div class="form-group"> <input type="text" v-model="profile.postCode" placeholder="Postcode" class="form-control"> </div> </div> <div class="col-md-4"> <div class="form-group"> <input type="submit" @click="updateProfile" value="Save Changes" class="btn btn-primary w-100"> </div> </div> </div> </div> </div> <div class="tab-pane fade pt-3" id="account" role="tabpanel" aria-labelledby="account-tab"> <div class="container"> <div class="row"> <div class="col-md-"> <div class="alert alert-info"> Please use the Reset password email button for reseting the password. The form doens't work currently </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" v-model="account.name" placeholder="User name" class="form-control"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" v-model="account.email" placeholder="Email address" class="form-control"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" v-model="account.password" placeholder="New password" class="form-control"> </div> </div> <div class="col-md-6"> <div class="form-group"> <input type="text" v-model="account.confirmPassword" placeholder="Confirm password" class="form-control"> </div> </div> <div class="col-md-4"> <div class="form-group"> <input type="file" @change="uploadImage" class="form-control"> </div> </div> <div class="col-md-4"> <div class="form-group"> <input type="submit" value="Save Changes" class="btn btn-primary w-100"> </div> </div> <div class="col-md-4"> <div class="form-group"> <input type="button" @click="resetPassword" value="Reset password email" class="btn btn-success w-100"> </div> </div> </div> </div> </div> </div> </div> </div> </div> </template> <script> import { fb, db } from '../firebase'; export default { name: "Profile", components: { }, props: { msg: String }, data(){ return { profile: { name:null, phone:null, address:null, postcode:null }, account:{ name:null, email:null, photoUrl:null, emailVerified:null, password:null, confirmPassword:null, uid:null } } }, firestore(){ const user = fb.auth().currentUser; return { profile: db.collection('profiles').doc(user.uid), } }, methods:{ resetPassword(){ const auth = fb.auth(); auth.sendPasswordResetEmail(auth.currentUser.email).then(() => { Toast.fire({ type: 'success', title: 'Email sent' }) }).catch((error) => { console.log(error); }); }, updateProfile(){ this.$firestore.profile.update(this.profile); }, uploadImage(){ } }, created(){ } }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> </style>

这是 main.js

 import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import jQuery from "jquery"; import { fb } from "./firebase"; import VueFirestore from "vue-firestore"; import Swal from "sweetalert2"; Vue.use(VueFirestore, { key: "id", enumerable: true }); window.Swal = Swal; const Toast = Swal.mixin({ toast: true, position: "top-end", showConfirmButton: false, timer: 3000 }); window.Toast = Toast; window.$ = window.jQuery = jQuery; Vue.use(VueFirestore); import "popper.js"; import "bootstrap"; import "./assets/app.scss"; Vue.component("Navbar", require("./components/Navbar.vue").default); Vue.component("NavAdmin", require("./views/NavAdmin.vue").default); Vue.component("Requests", require("./views/Requests.vue").default); Vue.component( "ViewBulkRequest", require("./views/ViewBulkRequest.vue").default ); Vue.config.productionTip = false; let app = ""; fb.auth().onAuthStateChanged(function(user) { if (,app) { new Vue({ router: render. h => h(App) });$mount("#app"); } });

Answer 1

这没有解决，我们只是切换到一些新代码。 谢谢你。