我如何使用 firebase 快照打印多个 json 对象数据 - 数据拉取成功

Question

到目前为止我已经开始工作了。

从快照拉取到控制台的数据：

{34FrUM8777N6i0IWfqsatdMc29g1: {…}, 3DSOrtpBHlYENn14bE9UJKWly4G3: {…}}
3DSOrtpBHlYENn14bE9UJKWly4G3:
-MH8EpUbn1Eu3LdT0Tj0: {code: "https://www.apesyntax.com", content: "This is the tut content", date: "2020-09-13", email: "test", first: "tester guy", …}
-MH8TRc3NfinUtI-XORZ: {code: "https://www.codepen.io/apesyntax/pen/ExKNawv", content: "asdad asd asd a", date: "2020-09-13", email: "test@tester", first: "tester", …}
__proto__: Object
34FrUM8777N6i0IWfqsatdMc29g1:
-MH9rJPyKpgKm7HnulTZ: {code: "https://www.codepen.io", content: "Tutorial content from the second tutroial posted by this author. ", date: "2020-09-13", email: "apesyntax@gmail.com", first: "ape ", …}
-MH49Fad5NKD9awjQzVF: {code: "https://www.codepen.io/apesyntax/pen/ExKNawv", content: "new tutorial testing data fetching", date: "2020-09-12", email: "servicioscelfonica@gmail.com", first: "apesyntax", …}
__proto__: Object

到目前为止，我设法按照我想要粘贴的顺序提取数据，但如何将这些数据粘贴到我的视图中？

这是我的完整代码：

<template>
  <v-container id="my-tutorials">
      <h1>All Tutorials</h1>
           <!-- loop over the tutorials -->
           <div v-for="(tutorial, key) in allTutorials" :key="key">
           <h2>{{ user.uid.title }}</h2>
           <p>{{ tutorial.content }}</p>
           <!-- and so on -->
     </div>
  </v-container>
</template>

<script>

import firebase from '../plugins/firebase'
import vue from 'vue'

let db = firebase.database();
//let usersRef = db.ref('users');
let tutRef = db.ref('tutorials');

export default {
  name: 'TutShow',
  data() {
      return {
          authUser: {},
          allTutorials: {}
      }
  },
  methods: {
  },
  created: function() {
    data => console.log(data.user, data.credential.accessToken)
    firebase.auth().onAuthStateChanged(user => {
        this.authUser = user
        if (user) {
          tutRef.once('value', snapshot => {
            snapshot.val()
            console.log(snapshot.val())
            if (snapshot.val()) {
            this.allTutorials = snapshot.forEach(this.allTutorials)
            vue.set( 'allTutorials', this.allTutorials )
             }
          });
        }

     })
   }
}
</script>

这是我的结果：

但是我还不能在我的屏幕上打印所有教程数据:

有什么提示吗？

Answer 1

您的 value 处理程序中存在一些语法和逻辑错误。

你想要做的（我认为）是 flat-map 将所有嵌套文档放入一个数组或对象中。

我会选择这样的阵列

data: () => ({
  authUser: null,
  allTutorials: [] // initialise an array
})

并在您的 value 处理程序中

tutRef.once('value', snapshot => {
  const val = snapshot.val()
  if (val) {
    this.allTutorials = Object.values(val).flatMap(tutes =>
      Object.entries(tutes).map(([ _key, tutorial ]) => ({ _key, ...tutorial })))
  }
})

然后在你的模板中，你可以使用这个

<div v-for="tutorial in allTutorials" :key="tutorial._key">
  <h1>{{ tutorial.title }}</h2> <!--  just guessing on this one -->
  <p>{{ tutorial.content }}</p>
</div>

我如何使用 firebase 快照打印多个 json 对象数据 - 数据拉取成功

How can i print multiple json object data using firebase snapshot - data pull succeded

iteration

json

snapshot

firebase

vue.js