Home NuxtJS + Graphql – Everything was well but the post title does not shows up in Template

Questions

NuxtJS + Graphql – Everything was well but the post title does not shows up in Template

October 3, 2022

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"
          }
        }
      ]
    }
  }
}