Any assistance for a beginner like me would be greatly appreciated. I am currently working with vuejs and firebase to write data into the database from a vue component. I have successfully implemented authentication and writing functionality, but now I want each user to write in their own component rather than all users on the same component. Below is my code:
Users log in to this component (login.vue):
<template>
<div>
<h2> auth </h2>
<div class="container">
<div class="row">
<div class="col s12 m8 offset-m2">
<div class="login card-panel green white-text center">
<h3>Login</h3>
<form action="index.html">
<div class="input-field">
<i class="material-icons prefix">email</i>
<input type="email" id="email" v-model="email">
<label class="white-text" for="email">Email Address</label>
</div>
<div class="input-field">
<i class="material-icons prefix">lock</i>
<input type="password" id="password" v-model="password">
<label class="white-text" for="password">Password</label>
</div>
<button v-on:click="login" class="btn btn-large btn-extended
grey lighten-4 black-text">Login</button>
</form>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import firebase from 'firebase';
export default {
name: 'login',
data: function() {
return {
email: '',
password: ''
};
},
methods: {
login: function(e) {
firebase
.auth()
.signInWithEmailAndPassword(this.email, this.password)
.then(
user => {
alert(`You are logged in as ${user.email}`);
this.$router.go({ path: this.$router.path });
},
err => {
alert(err.message);
}
);
e.preventDefault();
}
}
};
</script>
In this component(envio.vue), users can write and send data to Firebase:
<template>
<div id="app">
<form @submit.prevent="enviarMensaje">
<textarea v-model="boton1" cols="30" rows="1"></textarea>
<br>
<textarea v-model="mensaje" cols="30" rows="10"></textarea>
<br>
<input type="submit" value="Enviar mensaje">
</form>
<hr>
<h1>texto con idicaciones</h1>
</div>
</template>
<script>
import firebase from 'firebase'
import { contenidoFormulario } from '../firebase'
export default {
data: function() {
return {
mensaje: null,
boton1: null,
usuario: '',
}
},
methods: {
enviarMensaje(){
contenidoFormulario(uid).set({
mensaje: this.mensaje,
boton1: this.boton1,
usuario: this.usuario,
})
}
}
}
</script>
Below is the structure of the Firebase database in JSON format:
Project
-- formularioContenido:
boton1: "..."
mensaje: "..."
usuario: "..."
This is the desired structure:
Project
-- formularioContenido:
--user A
boton1: "..."
mensaje: "..."
usuario: "..."
--user B
boton1: "..."
mensaje: "..."
usuario: "..."
The code for '../firebase':
import { initializeApp } from 'firebase';
const app = initializeApp({
apiKey: """",
authDomain: """
databaseURL: "",
projectId: "",
storageBucket: ""
messagingSenderId: ""
});
export const db = app.database();
export const contenidoFormulario = db.ref('formularioContenido');
Main.js file:
let app;
firebase.auth().onAuthStateChanged(user => {
if (!app) {
app = new Vue({
el: '#app',
data: {uid: null},
router,
template: '<App/>',
components: { App }
});
} });
Logout functionality:
<template>
<div id="app">
<section>
//...
<li v-if="isLoggedIn"><button v-on:click="logout" class="btn
black">Logout</button></li>
</section>
</div>
</template>
<script>
import firebase from 'firebase';
export default {
name: 'navbar',
data() {
return {
isLoggedIn: false,
currentUser: false,
};
},
created() {
if (firebase.auth().currentUser) {
this.isLoggedIn = true;
this.currentUser = firebase.auth().currentUser.email;
}
},
methods: {
logout: function() {
firebase
.auth()
.signOut()
.then(() => {
this.$root.uid = null;
this.$router.go({ path: this.$router.path });
});
}
}
};
</script>