0

Esto tengo: El codepen: mostrar con vue fire

js:

    let config = {
        apiKey: "AIzaSyADg_j2wCsHOog0v8EiytCpm4rUdFnbGFs",
        authDomain: "vuefire-38fad.firebaseapp.com",
        databaseURL: "https://vuefire-38fad.firebaseio.com",
        projectId: "vuefire-38fad",
        storageBucket: "vuefire-38fad.appspot.com",
        messagingSenderId: "61468431295"
    }

    let app = firebase.initializeApp(config)

    let db = app.database()

    let crudVuejs = db.ref('update')



new Vue({
    el: '#main',
    firebase:{
        datosfire: crudVuejs
    },
    data:{
        inputDato:''

    },
    methods:{

    }


})

Y esto el html:

<div id="main" class="container">

    <div class="row">
        <h1>
            {{ datosfire }}
        </h1>
    </div>
</div>

Solo esto esta en la bd: introducir la descripción de la imagen aquí

2

1 respuesta 1

1

Prueba con lo siguiente:

let config = {
apiKey: "AIzaSyADg_j2wCsHOog0v8EiytCpm4rUdFnbGFs",
authDomain: "vuefire-38fad.firebaseapp.com",
databaseURL: "https://vuefire-38fad.firebaseio.com",
projectId: "vuefire-38fad",
storageBucket: "vuefire-38fad.appspot.com",
messagingSenderId: "61468431295"
    }

new Vue({
    el: '#main',
mounted(){
 let app = firebase.initializeApp(config)

let db = app.database()

let _this = this
  db.ref('update').on('value', function(snapshot) {
      _this.datosfire = snapshot.val()
   });
},
    data:{
      datosfire: ""
    },
})

Instanciamos la petición con la function reservada de vue js mounted(), después hay que usar una variable _this para no perder el scope de la instancia vue y poder referirnos al data y en la petición a firebase ejecutamos la function on para escuchar cualquier cambio en la BD de firebase y la palabra snapshot nos indica el cambio y obtenemos su valor en este caso para pasarlo a la data.

2
  • Podrías explicar que es lo que hace tu código para que la comunidad sepa que se realizó. Gracias.
    – Ajeno
    Commented el 22 nov. 2017 a las 22:46
  • listo amigo espero se explique mejor Commented el 22 nov. 2017 a las 22:53

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.