With Nuxt Strapi Graphql, I'm trying to show the post title here and below is my code. No error and everything was well but the post title just didn't show up.
If you look at the Graphql query below, I managed to pull out all those post information in Playground.
Any idea what went wrong? How should I access the object?
<template>
<div>
<div v-for="post in posts" :key="post.slug">
<h1>{{ post.title }}</h1>
</div>
</div>
</template>
<script>
import { postQuery } from '~/graphql/query'
export default {
data() {
return {
posts: [],
}
},
apollo: {
posts: {
prefetch: true,
query: postQuery,
},
},
}
</script>
import gql from 'graphql-tag';
export const postQuery = gql`
query postQuery {
posts {
data {
attributes {
Title
DateTime
Content
IsAlgoAvailable
Slug
publishedAt
}
}
}
}
`
Below Graphql query looking good
{
"data": {
"posts": {
"data": [
{
"attributes": {
"Title": "First Post Hello World",
"DateTime": "2022-10-02T16:02:00.000Z",
"Content": "First Hello World Content",
"Slug": "enter-title-here",
"publishedAt": "2022-10-03T13:20:47.359Z"
}
},
{
"attributes": {
"Title": "2nd Post",
"DateTime": "2022-10-02T16:01:00.000Z",
"Content": "Enter Content Here...",
"Slug": "2nd-post",
"publishedAt": "2022-10-03T14:34:44.140Z"
}
}
]
}
}
}
CodePudding user response:
Since the data had a data.posts.data
kind of structure, you need to loop on it like
v-for="post in posts.data"