Vuefire로 Vuejs의 Firebase 데이터 검색

Question

나는이 트리 구조로 내 firebase DB를 가지고 있습니다.

나는 데이터베이스를 통해 루프 VUE 불을 사용합니다. 이름 속성에서 "CantFindMe"값을 검색하고 싶습니다. 내가하려고 할 때 { "CantFindMe"} : 거짓, "이름": "-KxrySGBHgLvw_lPPdRA": { "편집"}

그러나

// Dashboard.vue 
<template> 

<div class=""> 
    <ul> 
    <li v-for="personName in names" v-bind:key="personName['.key']"> 
     <div v-if="!personName.edit"> 

     <p>{{ personName.forms.step1 }}</p> 

     </div> 
    </li> 
    </ul> 
</div> 
</template> 

<script> 

import { namesRef} from '../firebase.js' 

export default { 
    name: 'app', 
    data() { 
    return { 
     name: '' 
    } 
    }, 
    firebase: { 
    names: namesRef 
    } 
} 
</script> 

// Firebase.js 

    { The usual firebase config } 
    {...} 
    export const firebaseApp = firebase.initializeApp(config) 
    export const db = firebaseApp.database() 
    export const namesRef = db.ref('names') 

내가 객체를 읽어 관리 : 내 파일은 다음과 같이 ".step1"다음에 ".name"을 추가하면 "CantFindMe"가 반환 될 것입니다. 빈 칸이 없습니다.

어떻게 "CantFindMe"를 반환하는 VueJs를 사용하여 이름 속성에받을 수 있나요?

Answer 1

죄송합니다 : 존재하는 항목은 .step1["-KxrySGBHgLvw_lPPdRA"].name

여러 사용자가있는 경우

이며 어쩌면이 작업을 수행 할 수 있습니다 당신은이 모든을 통해 루프를 원하는 첫째 -뿐 아니라 직접 1 단계에 이름을 참조하지 않습니다

이

export const namesRef = db.ref('names/EcoClim/forms/step1/') 

당신은 다음과 같은 구조를 얻을 것이다 :

[{ 
    ".key": "-KxrySGBHgLvw_lPPdRA", 
    "edit": "false", 
    "name": "CantFindMe" 
}, { 
    ... 
}] 

이제 템플릿을 사용하지만 키로서, 배열 인덱스를 참조 키 FBase 할 수 없습니다

<li v-for="(person, idx) in names" :key="idx"> 
    <div v-if="!person.edit"> 
    <p>{{ person.name }}</p> 
    </div> 
</li> 

Answer 2

그 이유는 .step1.name 항목이 존재하지 않기 때문입니다. 그래서 ..., 임 vuefire를 사용하지 않는 지연

for(let i = 0; i != Object.keys(Yourobject.step1).length; i++){ 
    console.log("A user:" + Yourobject.step1[Object.keys(Yourobject.step1)[i]].name); 
}