如何在页面加载时将 firebase 的输出输出到 html 的模板？

Question

我正在使用 VueJs 为博客创建 post 页面。

我有这个作为模板：

<template>
...
            <q-item-section>
              <q-item-label class="text-subtitle1">
                <strong>Danny Connell</strong>
                <span class="text-grey-7">
                  @danny__connell 
                </span>
              </q-item-label>
              <q-item-label class="qweet-content text-body1">{{ get_post().content }}</q-item-label>
            </q-item-section>
...
</template>

我正在尝试将 vue 方法（查询 firebase）的 post 的内容添加到模板。

export default {
  name: 'PagePost',
  methods: {

    get_post(){
        var post_id = this.$route.query.id
        var post = {
            id: post_id,
        }
        post.content = "hi"
        db.collection('posts').doc(post_id).get().then(snapshot => {
            const document = snapshot.data()
            post.content = document.content //lets say the content is "hello"
        return post
    },
}

我在模板 "hi" 中看到，但没有看到数据库中的内容（“你好”），当我删除行 post.content = "hi" 时，我什么也没看到在 html 的模板中。

据我了解，数据库检索数据库内容需要时间，因此在完成数据库查询之前会跳到下一行。

我尝试使用 async/await，但我仍然没有得到 post 的内容：

export default {
  name: 'PagePost',
  methods: {

    async get_post(){
        var post_id = this.$route.query.id
        var post = {
            id: post_id,
        }
        await db.collection('posts').doc(post_id).get().then(snapshot => {
            const document = snapshot.data()
            post.content = document.content //lets say the content is "hello"
        return post
    },
}

如何将数据库的输出输出到 html 的模板？

Answer 1

当你在这里调用get_post()时

<q-item-label>{{ get_post().content }}</q-item-label>

您没有呈现响应式属性，请尝试在 data 中定义 postContent 并在安装组件时调用 get_post()。

示例：

<template>
  <QItemLabel class="qweet-content text-body1">{{ postContent }}</QItemLabel>
</template>

<script>
export default {
  name: 'PagePost',
  data: () => ({
    postContent: ''
  }),
  mounted() {
    this.get_post()
  },
  methods: {
    get_post() {
      const post_id = this.$route.query.id
      const post = { id: post_id } // Not using this, check this line!

      db.collection('posts')
        .doc(post_id)
        .get()
        .then(snapshot => {
          this.postContent = snapshot.data().content
        })
    }
  }
}
</script>

如何在页面加载时将 firebase 的输出输出到 html 的模板？

How can I get the firebase's output to the html's template on page load?

async-await

vue.js

vue-component

vuejs2

示例：