I'm currently working on my Vue cli project and I am trying to showcase all the posts from a Ghost blog using the API.
Unfortunately, the example provided on the page is for a nuxt project.
Once we have called the dependencies and authenticated with the blog, we can create a function to fetch the posts:
export async function getPosts() {
return await api.posts
.browse({
limit: "all"
})
.catch(err => {
console.error(err);
});
}
Now, 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>
This setup works seamlessly on Nuxt as well as Node.
Simply calling the function gets us all the posts without any issues.
However, when attempting the same approach within the Data function in vue like this:
data: () => {
let posts = getPosts()
return {
resultado: posts,
};
}
The getPosts() function returns a pending Promise.
I've tried resolving the promise using .then() to access the results but faced difficulties passing it to the return part of data.
data: () => {
let posts = getPosts()
.then((results) => {
return results;
})
.catch((err) => {
console.error(err);
});
return {
resultado: posts,
};
}
Any suggestions on how to make the results from getPosts() available on the template would be highly appreciated!
Thank you!