VueJsページにfirebaseデータベースクエリを出力する方法

Question

現在、現在のユーザ用にFirebaseデータベースにクエリしていますusername。 <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) 
     } 
     }); 
    } 
    } 

テンプレート

​​

Answer 1

ユーザー名を取得されていますが、VUEインスタンスオブジェクト（dataオブジェクト）を更新されていません。あなたは（more details here）それを更新するvueInstance.$set(vueInstance, 'propertyName', newPropertyValue);を呼び出すことができます。

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; 

0このため

：

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