VueJs 페이지로 firebase 데이터베이스 쿼리를 출력하는 방법

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 개체) 업데이트되지 않습니다. 당신은 그것을 업데이트 할 (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;