1

Hola coders! Tengo una situación a la cual no puedo hallar solución: Estoy desarrollando una aplicación con Vue CLI y firebase. Tengo un formulario de registro el cual es funcional, pero a la hora de escribir datos en firestore no guarda nada.

No se muestra ningún error en consola y he visto algunos sitios donde enseñan a realizar la conexión y no veo algo distinto de lo que yo tengo.

Les dejo mis archivos para ver si tienen alguna sugerencia:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import * as firebase from "firebase"

Vue.config.productionTip = false

const configOptions = {
  apiKey: "AIzaSyAkUyYSxQq5g5DB6h_LgfG2lC7JzgIDHWw",
  authDomain: "t-panel-eccf9.firebaseapp.com",
  databaseURL: "https://t-panel-eccf9.firebaseio.com",
  projectId: "t-panel-eccf9",
  storageBucket: "t-panel-eccf9.appspot.com",
  messagingSenderId: "132805805270",
  appId: "1:132805805270:web:36b4b43a9b0829fc34b577",
  measurementId: "G-PF2ESSB4X8"
};

firebase.initializeApp(configOptions);

export const db = firebase.firestore()

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
<script>
// @ is an alias to /src
import Banner from '@/components/AuthScreens/Banner';
import firebase from "firebase";
import db from "firebase";

export default {
  name: 'signup',
  components: {
    Banner
  },

  data() {
    return {
      form: {
        inputRegisterEmail: "",
        inputRegisterPassword: "",
        inputRegisterName: "",
        inputRegisterLastName: ""
      },
      error: null
    }
  },

  methods: {
    submit() {
      firebase
        .auth()
        .createUserWithEmailAndPassword(this.form.inputRegisterEmail, this.form.inputRegisterPassword)
        .then(data => {
          db.collection("cities").doc("LA").add({
              name: "Los Angeles",
              state: "CA",
              country: "USA"
            })
            .then(function () {

            })
            .catch(function (error) {
              alert(error)
            });
          data.user.updateProfile({
              displayName: this.form.inputRegisterName + ' ' + this.form.inputRegisterLastName
            })
            .then(() => {
              //Code here

            })
        })
        .catch(err => {
          this.error = err.message
        })
    }
  }
}
</script>

El primer código es main.js y el segundo es el apartado de script de mi archivo signup.vue

2 respuestas 2

0

Primero que nada te hace falta importar el modulo firebase/firestore el cual no veo por ningún lado de tu código. Además de que tienes mal estructurado tu código

Tu primer código debería verse así:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

Y en el segundo código que muestras estas importando dos veces el mismo módulo. Además te hace falta el modulo `firebase/auth'. En fin tu código es un desastre, parecen huevos revueltos(aunque son muy ricos xd)

Y el segundo código debería verse así

<script>
// @ is an alias to /src
import Banner from '@/components/AuthScreens/Banner';
import * as firebase from "firebase/app" // así para evitar importar todos los módulos de firebase
import "firebase/firestore" // con esto es mas que suficiente para usar la función 'firebase.firestore()'
import "firebase/auth"

const configOptions = {
  apiKey: "AIzaSyAkUyYSxQq5g5DB6h_LgfG2lC7JzgIDHWw",
  authDomain: "t-panel-eccf9.firebaseapp.com",
  databaseURL: "https://t-panel-eccf9.firebaseio.com",
  projectId: "t-panel-eccf9",
  storageBucket: "t-panel-eccf9.appspot.com",
  messagingSenderId: "132805805270",
  appId: "1:132805805270:web:36b4b43a9b0829fc34b577",
  measurementId: "G-PF2ESSB4X8"
};

firebase.initializeApp(configOptions);

const db = firebase.firestore()

export default{
    name: 'signup',
    components:{
        Banner
    },

    data(){
        return{
            form:{
                inputRegisterEmail: "",
                inputRegisterPassword: "",
                inputRegisterName: "",
                inputRegisterLastName: ""
            },
            error: null
        }
    },

    methods:{
        submit(){
            firebase
            .auth()
            .createUserWithEmailAndPassword(this.form.inputRegisterEmail, this.form.inputRegisterPassword)
            .then(data => {
                db.collection("cities").doc("LA").add({
                    name: "Los Angeles",
                    state: "CA",
                    country: "USA"
                })
                .then(function() {

                })
                .catch(function(error) {
                    alert(error)
                });
                data.user.updateProfile({
                    displayName: this.form.inputRegisterName + ' ' + this.form.inputRegisterLastName
                })
                .then(() => {
                    //Code here

                })
            })
            .catch(err => {
                this.error = err.message
            })
        }
    }
}
</script>
2
  • Me arroja el siguiente error: firebase__WEBPACK_IMPORTED_MODULE_1___default.a.collection is not a function. Y sigue sin escribir nada en Firestore, los uduarios se siguen registrando sin problemas pero ahora sigue sin escribir además de que arroja ese error Commented el 3 feb. 2020 a las 6:25
  • Intentalo sin el atributo type="module" Commented el 3 feb. 2020 a las 19:22
0

Solucionado El error lo solucioné agregando vue-firestore. Les dejo el enlace en el que me basé por si le ayuda a alguien: https://alligator.io/vuejs/vue-cloud-firestore/

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.