Question

使用 Vuefire 在 Vuejs 中检索 Firebase 数据

2017-11-01

4010

javascript firebase firebase-realtime-database vue.js vuefire

我的 firebase DB 具有此树结构。

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

// 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')

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

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

如何使用 VueJs 获取 name 属性以返回“CantFindMe”？

Answer 1

抱歉回复晚了，我没有使用 vuefire...所以，首先 - 不要只引用名称，而要直接引用步骤 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>