質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

Q&A

解決済

1回答

2319閲覧

Contentful Nuxt.js "TypeError: Cannot read property 'fields' of undefined"

kagepedia

総合スコア16

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

API

APIはApplication Programming Interfaceの略です。APIはプログラムにリクエストされるサービスがどのように動作するかを、デベロッパーが定めたものです。

0グッド

0クリップ

投稿2020/03/21 09:17

編集2020/03/22 09:31

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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

データをループしている外でデータを持っていたので表示されないことがわかりました。

<ul></ul>

ulタグ内に記述すれば、きちんとルーチングできました。

投稿2020/03/22 12:47

kagepedia

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問