Question

目前，我正在为当前用户username查询Firebase数据库。我希望值显示在<template>区域内的页面上。查看文档，但仍然是Vue的新手。

所有内容都会正确输出到控制台，我只是不确定使用胡子句柄在<template>内引用的下一步。 {{ 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);进行更新（how strict-aliasing rules benefit an optimizer）：

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>

Answer 2

您可以在您需要的数据中使用{{user.username}}：

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

并且您没有更新正确的用户名实例，您可以更改此行：

var userName = snapshot.val().username;

为此：

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

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

2 个答案: