How to get posts from Ghost Blog, using the API, on a Vue cli project

Viewed 278

I'm trying to display, on my Vue cli project, all the posts on a Ghost blog using the API.

The example on the page is for a nuxt project.

After calling the dependencies and authenticating with the blog, we simply create a function to get the posts:

export async function getPosts() {
  return await api.posts
    .browse({
      limit: "all"
    })
    .catch(err => {
      console.error(err);
    });
}

Then on the vue page:

<template>
  <ul>
    <li v-for="post in posts">{{ post.title }}</li>
  </ul>
</template>

<script>
  import { getPosts } from '../api/posts';

  export default {
    async asyncData () {
      const posts = await getPosts();
      return { posts: posts }
    }
  }
</script>

On Nuxt, this just works. On Node, it also just works.

I can call the function and get all the posts, and that's all.

But on vue, if I try the same thing on the Data function, like this:

  data: () => {
   let posts = getPosts()
   return {
    resultado: posts,
  };
}

getPosts() return a pending Promise

I tried resolving the promise using .then() and I get the results, but I can't pass it to the return portion of data.

  data: () => {
    let posts = getPosts()
      .then((results) => {
        return results;
      })
      .catch((err) => {
        console.error(err);
      });
    return {
      resultado: posts,
    };
  }

How can I make the results from getPosts() available on the template?

Thanks!

1 Answers

Call it in a lifecycle hook instead:

data() {
  return {
    resultado: null
  }
},
async created() {  // or async mounted()
  this.resultado = await getPosts();
}
Related