使用Vuefire在Vuejs中检索Firebase数据 [英] Retrieve Firebase data in Vuejs with Vuefire

问题描述

我有我的firebase DB这个树结构。

我使用vue-fire来遍历数据库。我想检索name属性中的CantFindMe值。我的文件如下所示：

  // Dashboard.vue 
< template> 
 
< div class => 
< ul> 
< li v-for =personName in namesv-bind：key =personName ['.key']> 
< div v-if =！personName.edit> 
 
< p> {{personName.forms.step1}}< / p> 
 
< / div> 
< / li> 
< / ul> 
< / div> 
< / template> 
 
< script> 
 
从'../firebase.js'导入{namesRef} 
 
导出默认值{
名称：'app'，
 data（）{ 
 return {
 name：''
} 
}，
 firebase：{
 names：namesRef 
} 
} 
< / script> 
 $ b // Firebase.js 
 $ b {通常的firebase配置} 
 {...} 
 export const firebaseApp = firebase.initializeApp（config） 
 export const db = firebaseApp.database（）
 export const namesRef = db.ref（'names'）
  

设法读取对象：{-KxrySGBHgLvw_lPPdRA：{edit：false，name：CantFindMe}}

<但是，当我尝试在.step1之后添加.name时，应该返回CantFindMe，我什么也没有/空白回来。

我使用VueJs返回CantFindMe的名称属性？

解决方案

对不起，延迟，我没​​有使用vuefire ...所以，首先 - 不要只引用名字，而是直接引用step1：

  export const namesRef = db.ref（'names / EcoClim / forms / step1 /'）
  

您将获得像这样的结构： b
$ b

  [{
.key：-KxrySGBHgLvw_lPPdRA，
编辑：false，
name：CantFindMe
}，{
 ... 
}] 
  pre 
 $ b $现在你可以在模板中使用它，但是作为键，引用数组索引而不是FBase键：
 
 
 < li v-for =（person，idx）in names：key =idx> 
< div v-if =！person.edit> 
< p> {{person.name}}< / p> 
< / div> 
< / li> 
  
 
I have my firebase DB with this tree structure.



I use vue-fire to loop through the database. I want to retrieve the "CantFindMe" value in the name property. My files look like this:
// 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') 
I manage to read the object: { "-KxrySGBHgLvw_lPPdRA": { "edit": false, "name": "CantFindMe" } }

But when I try to add ".name" after ".step1", that should supposedly return "CantFindMe", I get nothing/blank back.

How do I get to the name property using VueJs to return "CantFindMe"?
解决方案
Sorry for delay, Im not using vuefire... So, first - do not refer to names only, but directly to step1:
export const namesRef = db.ref('names/EcoClim/forms/step1/')
You will obtain structure like this:
[{
  ".key": "-KxrySGBHgLvw_lPPdRA",
  "edit": "false",
  "name": "CantFindMe"
},  {
  ...
}]
Now you can use it in template, but as key, refer to array index and not to FBase key:
<li v-for="(person, idx) in names" :key="idx">
  <div v-if="!person.edit">
    <p>{{ person.name }}</p>
  </div>
</li>


                        
这篇关于使用Vuefire在Vuejs中检索Firebase数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！