javascript — проблема с передачей, доступом или предварительным заполнением данных — Vue.js / Firestore

Проблемы с передачей, доступом или предварительным заполнением данных — Vue.js / Firestore

Я пытаюсь выяснить, чего мне здесь не хватает. Я пытаюсь предварительно заполнить некоторые данные для страницы профиля пользователя. Эти данные предварительного заполнения поступают из коллекции Firestore DB. Мне удалось предварительно заполнить существующие поля при редактировании запросов, однако я озадачен частью профиля пользователя. Я включил ссылку на видео, показывающее, что я вижу. Также вот ошибка, которую я получаю:

 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) 

Видео моего выпуска

Я считаю, что у меня возникла проблема с одним из следующих файлов. Я могу предоставить больше информации, если это необходимо.

Login.vue

 {amp}lt;template{amp}gt; {amp}lt;div class="login"{amp}gt; {amp}lt;!-- Modal --{amp}gt; {amp}lt;div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="loginTitle" aria-hidden="true"{amp}gt; {amp}lt;div class="modal-dialog modal-dialog-centered" role="document"{amp}gt; {amp}lt;div class="modal-content"{amp}gt; {amp}lt;div class="modal-body"{amp}gt; {amp}lt;ul class="nav nav-fill nav-pills mb-3" id="pills-tab" role="tablist"{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-login" role="tab" aria-controls="pills-login" aria-selected="true"{amp}gt;Login{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link" id="pills-register-tab" data-toggle="pill" href="#pills-register" role="tab" aria-controls="pills-register" aria-selected="false"{amp}gt;Signup{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;div class="tab-content" id="pills-tabContent"{amp}gt; {amp}lt;div class="tab-pane fade show active" id="pills-login" role="tabpanel" aria-labelledby="pills-login-tab"{amp}gt; {amp}lt;h5 class="text-center"{amp}gt;Login Please{amp}lt;/h5{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="exampleInputEmail1"{amp}gt;Email address{amp}lt;/label{amp}gt; {amp}lt;input type="email" v-model="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email"{amp}gt; {amp}lt;small class="form-text text-muted"{amp}gt;We'll never share your email with anyone else.{amp}lt;/small{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="exampleInputPassword1"{amp}gt;Password{amp}lt;/label{amp}gt; {amp}lt;input type="password" @keyup.enter="login" v-model="password" class="form-control" id="exampleInputPassword1" placeholder="Password"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;button class="btn btn-primary" @click="login"{amp}gt;Login{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="tab-pane fade" id="pills-register" role="tabpanel" aria-labelledby="pills-register-tab"{amp}gt; {amp}lt;h5 class="text-center"{amp}gt;Create New Account{amp}lt;/h5{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="name"{amp}gt;Your name{amp}lt;/label{amp}gt; {amp}lt;input type="text" v-model="name" class="form-control" id="name" placeholder="Your nice name"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="email"{amp}gt;Email address{amp}lt;/label{amp}gt; {amp}lt;input type="email" v-model="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;label for="password"{amp}gt;Password{amp}lt;/label{amp}gt; {amp}lt;input type="password" v-model="password" class="form-control" id="password" placeholder="Password"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;button class="btn btn-primary" @click="register"{amp}gt;Signup{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; 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(() ={amp}gt; { $('#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) ={amp}gt; { $('#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); }); } } }; {amp}lt;/script{amp}gt; {amp}lt;!-- Add "scoped" attribute to limit CSS to this component only --{amp}gt; {amp}lt;style scoped lang="scss"{amp}gt; {amp}lt;/style{amp}gt; 

Вот это Profile.vue

 {amp}lt;template{amp}gt; {amp}lt;div class="profile"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="intro h-100"{amp}gt; {amp}lt;div class="row h-100 align-items-center"{amp}gt; {amp}lt;div class="col-md-6 ml-3"{amp}gt; {amp}lt;h3{amp}gt;Profile settings{amp}lt;/h3{amp}gt; {amp}lt;p{amp}gt; Change your profile settings here {amp}lt;/p{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-5"{amp}gt; {amp}lt;img src="/img/svg/profile.svg" width="300" alt="javascript - проблема с передачей, доступом или предварительным заполнением данных - Vue.js / Firestore" class="img-fluid"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="profile-content"{amp}gt; {amp}lt;ul class="nav nav-pills ml-3" id="myTab" role="tablist"{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link active" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true"{amp}gt;Profile{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li class="nav-item"{amp}gt; {amp}lt;a class="nav-link" id="account-tab" data-toggle="tab" href="#account" role="tab" aria-controls="account" aria-selected="false"{amp}gt;Account settings{amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;div class="tab-content" id="myTabContent"{amp}gt; {amp}lt;div class="tab-pane fade show active pt-3" id="profile" role="tabpanel" aria-labelledby="profile-tab"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-md-6"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="text" name="" v-model="profile.name" placeholder="Full name" class="form-control"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-6"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="text" v-model="profile.phone" placeholder="Phone" class="form-control"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-12"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="text" v-model="profile.address" placeholder="Address" class="form-control"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-8"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="text" v-model="profile.postCode" placeholder="Postcode" class="form-control"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="submit" @click="updateProfile" value="Save Changes" class="btn btn-primary w-100"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="tab-pane fade pt-3" id="account" role="tabpanel" aria-labelledby="account-tab"{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;div class="row"{amp}gt; {amp}lt;div class="col-md-"{amp}gt; {amp}lt;div class="alert alert-info"{amp}gt; Please use the Reset password email button for reseting the password. The form doens't work currently {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-6"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="text" v-model="account.name" placeholder="User name" class="form-control"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-6"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="text" v-model="account.email" placeholder="Email address" class="form-control"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-6"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="text" v-model="account.password" placeholder="New password" class="form-control"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-6"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="text" v-model="account.confirmPassword" placeholder="Confirm password" class="form-control"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="file" @change="uploadImage" class="form-control"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="submit" value="Save Changes" class="btn btn-primary w-100"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div class="col-md-4"{amp}gt; {amp}lt;div class="form-group"{amp}gt; {amp}lt;input type="button" @click="resetPassword" value="Reset password email" class="btn btn-success w-100"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; 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(() ={amp}gt; { Toast.fire({ type: 'success', title: 'Email sent' }) }).catch((error) ={amp}gt; { console.log(error); }); }, updateProfile(){ this.$firestore.profile.update(this.profile); }, uploadImage(){ } }, created(){ } }; {amp}lt;/script{amp}gt; {amp}lt;!-- Add "scoped" attribute to limit CSS to this component only --{amp}gt; {amp}lt;style scoped lang="scss"{amp}gt; {amp}lt;/style{amp}gt; 

Вот 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 ={amp}gt; h(App) }).$mount("#app"); } }); по 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 ={amp}gt; h(App) }).$mount("#app"); } }); 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector