javascript - 如何将firebase数据库查询输出到VueJs页面

Question

目前我正在 Firebase 数据库中查询当前用户 username 。我希望该值显示在 <template> 内的页面上区域。浏览了文档，但对 Vue 仍然很陌生。

一切都会正确输出到控制台，我只是不确定下一步要在 <template> 中引用使用 mustache handle ，例如。 {{ 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>
 <span>{{ user.username }} (Output result of var userName here)</span>
</template>

Answer 1

您正在获取用户名，但没有更新 vue 实例对象(data 对象)。您可以调用 vueInstance.$set(vueInstance, 'propertyName', newPropertyValue); 来更新它 ( 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>