Nuxt.jsとContentfulAPIを利用してブログを作っています。
しかしながら一覧ページから詳細ページへのslugパラメータを渡したいのですが、
"TypeError: Cannot read property 'fields' of undefined"
このようなエラーが出てきます。
パラメータの私かたが悪いのでしょうか?
分かる方教えてください。
ここではデータを取得できています。
<li class="slug">{{ post.fields.slug }}</li>
nuxt-linkの記述をしたらエラーが出ました。
記述方法が悪いのでしょうか?
<div> <nuxt-link :to="{ name: 'posts-slug', params: { slug: post.fields.slug } }" > Read More </nuxt-link> </div>
ソース全体はこちら
<template> <v-container fluid> <template v-if="posts.length"> <ul v-for="(post, i) in posts" :key="i"> <li>{{ post.fields.title }}</li> <ul> <v-img :src="post.fields.image.fields.file.url" :alt="post.fields.image.fields.title" :aspect-ratio="16 / 9" max-width="400" max-height="225" /> <li v-html="toHtmlString(post.fields.body)"></li> <li>{{ post.fields.publishDate }}</li> <li class="slug">{{ post.fields.slug }}</li> </ul> </ul> <div> <nuxt-link :to="{ name: 'posts-slug', params: { slug: post.fields.slug } }" > Read More </nuxt-link> </div> </template> <template v-else> 投稿された記事はありません。 </template> </v-container> </template> <script> import { documentToHtmlString } from '@contentful/rich-text-html-renderer' import client from '~/plugins/contentful' export default { async asyncData({ env }) { let posts = [] await client .getEntries({ content_type: env.CTF_BLOG_POST_TYPE_ID, order: '-fields.publishDate' }) .then((res) => (posts = res.items)) .catch(console.error) return { posts } }, methods: { toHtmlString(obj) { return documentToHtmlString(obj) } } } </script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。