Блог

Пока у меня это работает.

Данные, извлеченные на консоль из моментального снимка :

 {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>
  

вот мой результат:

Но я пока не могу распечатать на своем экране данные всех руководств:

Есть какие-либо подсказки?

У вас есть пара синтаксических и логических ошибок в вашем 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>