我如何使用Firebase快照打印多个JSON对象数据-数据提取成功

如何解决我如何使用Firebase快照打印多个JSON对象数据-数据提取成功

到目前为止，我已经完成了这项工作。

从快照将数据拉到控制台：

{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",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. ",email: "[e-mail]",first: "ape ",…}
-MH49Fad5NKD9awjQzVF: {code: "https://www.codepen.io/apeSyntax/pen/ExKNawv",content: "new tutorial testing data fetching",date: "2020-09-12",email: "[e-mail]",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>

这是我的结果：

但是我还无法在所有教程数据中显示在屏幕上：

有任何提示吗？

解决方法

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

我想做的是将所有嵌套文档平面映射到一个数组或对象中。

我会选择这样的数组

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>