I'm creating a post-page for a blog using VueJs.

I have this as template:

<template>
...
            <q-item-section>
              <q-item-label >
                <strong>Danny Connell</strong>
                <span >
                  @danny__connell 
                </span>
              </q-item-label>
              <q-item-label >{{ get_post().content }}</q-item-label>
            </q-item-section>
...
</template>

I'm trying to get the content of the post, for a vue's method (that query a firebase), to the template.

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
    },
}

And I'm seeing in the template "hi", but not the content from the database ("hello"), and when I delete the line post.content = "hi", I don't see anything in the html's template.

As I understand, it takes time for the db to retrieve the DB's content, so its skips to the next lines before completing the db's query.

I tried to use async/await, but I still don't get the post's content:

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
    },
}

How can I get the db's output to the html's template?

CodePudding user response：

When you call get_post() here

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

You are not rendering a reactive property, try defining postContent in data and call get_post() when the component mounts.

Example:

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