How to output firebase database query into VueJs page

Question

Currently I am querying a Firebase database for the current users username. I would like the value to display on the page inside the <template> area. Looked through the docs but still new to Vue.

Everything will output into the console correctly, I am just unsure of the next step to reference inside the <template> using moustache handles eg. {{ user.username }}

  data() {
    return {
      userName: ''
    }
  },
  methods: {
    getName: function() {
      var userId = firebase.auth().currentUser.uid;
      return firebase.database().ref('users/' +
        userId).on('value', function(snapshot) {
        if (snapshot.val()) {
          var obj = snapshot.val();
          var userName = snapshot.val().username;
          console.log('username:', userName)
        }
      });
    }
  }

Template

<template>
 <span>{{ user.username }} (Output result of var userName here)</span>
</template>

I've never used vueJS, but have you tried {{ userName }} ? — Rosário P. Fernandes
– Rosário P. Fernandes, Commented Dec 26, 2017 at 15:59
You don't have a user data item. You have userName. You should probably set it in your .on callback, taking care to have this set properly. — Roy J
– Roy J, Commented Dec 26, 2017 at 16:39

tony19 · Accepted Answer · 2022-07-15 23:07:47Z

2

You are getting the username, but you are not updating the vue instance object (the data object). You can call vueInstance.$set(vueInstance, 'propertyName', newPropertyValue); to update it (more details here):

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Hello Vue.js!',
      userName: ''
    }
  },
  methods: {
    getName: function() {
      var vueInstance = this;
      return setTimeout(function() {
        var userName = 'new username';
        vueInstance.$set(vueInstance, 'userName', userName);
        console.log('username:', userName)
      }, 2000);
    }
  }
});

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <span>{{ message }}</span><br>
  <span>`{{ userName }}´ (Output result of var userName here)</span><br>
  <button @click="getName">Click me and wait for 2 seconds, the username will be updated</button>
</div>

edited Jul 15, 2022 at 23:07

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Dec 26, 2017 at 16:04

acdcjunior

136k37 gold badges341 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

scopeak Over a year ago

That makes sense! Thanks for the detailed response.

G. Santos · Accepted Answer · 2017-12-26 16:37:41Z

1

To you can use {{ user.username }}, in your data you need put like that:

data(){
    return{
        user: { 
            username:  ' '
        }
    }
}

and you are not updating the right username instance, you can change this line:

var userName = snapshot.val().username;

for this:

this.username = snapshot.val().username;

answered Dec 26, 2017 at 16:37

G. Santos

112 bronze badges

1 Comment

scopeak Over a year ago

Attempted this but receive the following error: TypeError: null is not an object (evaluating 'this.username = snapshot.val().username')

Collectives™ on Stack Overflow

How to output firebase database query into VueJs page

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related