Когда я вошел в систему и попал на страницу стажировки (1016 *) (мои данные поступают из базы данных), я могу увидеть эти данные. Но когда я выхожу из системы, я go перехожу на ту же страницу, но теперь я больше не вижу данных. Что я здесь не так?
Это стажировка. vue страница
Здесь я получаю данные из базы Firebase:
<template>
<div>
<h1 class="table">List Item</h1>
<table class="table table-striped">
<thead>
<tr>
<th>Internship name</th>
<th>Internship location</th>
<th>Education</th>
<th>Niveau</th>
<th>Availability</th>
<th>To erect</th>
<th>Company ID</th>
<th>Address</th>
<th>Phone number</th>
<th>Website</th>
<th colspan="2" v-if="isLoggedIn">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="item of items" :key="item['.key']">
<td>{{ item.name }}</td>
<td>{{ item.location }}</td>
<td>{{ item.education }}</td>
<td>{{ item.niveau }}</td>
<td>{{ item.availability }}</td>
<td>{{ item.toErect }}</td>
<td>{{ item.companyId }}</td>
<td>{{ item.address }}</td>
<td>{{ item.phoneNumber }}</td>
<td>{{ item.website }}</td>
<td v-if="isLoggedIn"><router-link :to="{ name: 'Edit', params: {id: item['.key']} }" class="btn btn-warning">Edit</router-link></td>
<td v-if="isLoggedIn"><button @click="deleteItem(item['.key'])" class="btn btn-danger">Delete</button></td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import firebase from "firebase";
import { db } from '../../config/db';
export default {
components: {
name: 'Internship'
},
data() {
return {
items: [],
isLoggedIn: false,
currentUser: false
}
},
firebase: {
items: db.ref('items')
},
methods: {
deleteItem(key) {
this.$firebaseRefs.items.child(key).remove();
}
},
created() {
if(firebase.auth().currentUser) {
this.isLoggedIn = true;
this.currentUser = firebase.auth().currentUser.email;
}
}
}
</script>
А это мое приложение. vue page
Здесь вы можете увидеть мою навигационную панель и маршруты.
<template>
<div id="app">
<nav class="navbar navbar-expand-lg navbar-light navbar">
<h1 class="default-color"><router-link :to="{ name: 'Index' }" class="default-color">Stage Finder</router-link></h1>
<button class="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" @click="isHidden = !isHidden"></span>
</button>
<div class="navbar-collapse" v-if="!isHidden">
<ul class="navbar-nav mr-auto"></ul>
<li v-if="isLoggedIn" class="nav"><span class="currentUser">{{currentUser}}</span></li>
<ul class="navbar-nav">
<li v-if="isLoggedIn" class="nav-item"><router-link :to="{ name: 'Add' }" class="nav-link">Add Item</router-link></li>
<li v-if="isLoggedIn" class="nav-item"><router-link :to="{ name: 'Internship' }" class="nav-link">Internships</router-link></li>
<li v-if="!isLoggedIn" class="nav-item"><router-link :to="{ name: 'Internship' }" class="nav-link">Internships</router-link></li>
<li v-if="isLoggedIn" class="nav-item"><router-link :to="{ name: 'Profile' }" class="nav-link">Profile</router-link></li>
<li v-if="!isLoggedIn" class="nav-item"><router-link :to="{ name: 'Sign in' }" class="nav-link">Sign in</router-link></li>
<li v-if="!isLoggedIn" class="nav-item"><router-link :to="{ name: 'Sign up' }" class="nav-link">Sign up</router-link></li>
<li v-if="isLoggedIn" class="nav-item"><button @click="logout" class="nav-link btn black">Logout</button></li>
</ul>
</div>
</nav>
<div class="gap">
<router-view></router-view>
</div>
</div>
</template>
<style lang="css">
@import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
/* standards */
.btn-primary, .navbar {
background-color: #f5940b;
border-color: #f5940b;
}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus, .btn-primary:link, .btn-primary:visited {
background-color: #DF9347;
}
.defaultColor {
color: white;
}
/* */
.navbar-light .navbar-brand {
color: white;
}
.navbar-light .navbar-nav .nav-link {
color: white;
}
.gap {
padding-top: 50px;
}
.currentUser {
margin-right: 50px;
font-weight: bold;
text-align: center;
color: white;
background-color: black;
border-radius: 15px;
padding-left: 10px;
padding-right: 10px;
}
.default-color {
color: white;
text-decoration: none;
}
.default-color:hover {
color: white;
text-decoration: none;
}
.navbar-light .navbar-nav .nav-link {
font-weight: 500;
}
.table {
margin-left: 50px;
margin-right: 50px;
}
</style>
<script>
import firebase from "firebase";
export default {
name: "app",
data() {
return {
isLoggedIn: false,
currentUser: false,
isHidden: false
};
},
methods: {
logout() {
firebase.auth().signOut().then(() => {
this.$router.push('/Signin')
location.reload();
})
}
},
created() {
if(firebase.auth().currentUser) {
this.isLoggedIn = true;
this.currentUser = firebase.auth().currentUser.email;
}
}
};
</script>