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!