Why is not data shown in vue js with firebase?

Question

Why is not data shown in vue js with firebase?

Navigation

#1 by (1 votes)

0

This I have: The codepen: show with 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:{

    }


})

And this the html:

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

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

Only this is in the bd:

firebase vue.js

asked by Juan Vargas 18.10.2017 в 03:17

source

1 answer

Call database with (this) in fragment git: when doing push up the files to my repo, but with a previous user that I had

score 1 · Answer 1

Try the following:

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: ""
    },
})

We instantiate the request with the reserved function of vue js mounted() , then we have to use a variable _this to not lose the scope of the instance vue and be able to refer to the data and in the request to firebase execute the function on to listen to any change in the database of firebase and the word snapshot tells us the change and we obtain its value in this case to pass it to the data.