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

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

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

CMS(Content Management System)は複数のユーザーでコンテンツを編集することが可能なWebサイトの管理/構築用のプラットフォームを指します。また、会社単位で運用管理するものはECMと呼びます。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

Q&A

解決済

1回答

3949閲覧

contentful の media が取得できない

cho5

総合スコア16

CMS

CMS(Content Management System)は複数のユーザーでコンテンツを編集することが可能なWebサイトの管理/構築用のプラットフォームを指します。また、会社単位で運用管理するものはECMと呼びます。

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

0グッド

0クリップ

投稿2019/01/20 02:04

編集2019/01/20 02:08

前提・実現したいこと

contentful から media を取得して nuxt で制作中のページに表示させる

発生している問題・エラーメッセージ

発生している現象は以下のサイトの方と同じです
https://github.com/KyleTryon/VidFireBlog/issues/1

Cannot read property 'fields' of undefined

https://note.mu/koushikagawa/n/na916f2b46baa
上の方と同様に実装を行ったのですが、post.fields.titleやpost.sys.createdAtなどは取得できるのにもかかわらず、post.fields.imgより以下の階層のものが取得できません  

なお、post.fileds.imgだけで出力されたものはいかになります  

{ "sys": { "space": { "sys": { "type": "Link", "linkType": "Space", "id": "3hasb61c1mn6" } }, "id": "4kaSk0Xd6ClxxSfTKTUJD3", "type": "Asset", "createdAt": "2019-01-19T06:38:05.712Z", "updatedAt": "2019-01-19T06:38:05.712Z", "environment": { "sys": { "id": "master", "type": "Link", "linkType": "Environment" } }, "revision": 1, "locale": "en-US" }, "fields": { "title": "スクリーンショット 2018-12-17 23.06.59", "file": { "url": "//images.ctfassets.net/3hasb61c1mn6/4kaSk0Xd6ClxxSfTKTUJD3/053bf5e2ed126e8054adaf0401a0c48c/____________________________2018-12-17_23.06.59.png", "details": { "size": 80752, "image": { "width": 1024, "height": 689 } }, "fileName": "スクリーンショット 2018-12-17 23.06.59.png", "contentType": "image/png" } } }

post.fields.img.fields.file.url
で画像のURLを取得できると思ったのですが、上記のエラーが出てきてしまいます
なにか取得する方法はあるのでしょうか?

該当のソースコード

親ページ

vue

1<template lang="pug"> 2 div 3 sub-header(title="お知らせ" desc="////////") 4 bread-crumb 5 .bg 6 .wrapper 7 article-card(v-for="(post, i) in posts" :key="post.key" :title="post.fields.title" :body="post.fields.body" :created="post.sys.createdAt" :updated="post.sys.updatedAt" :photo="post.fields.img") 8</template> 9 10<script> 11import SubHeader from '~/components/SubHeader.vue' 12import ArticleCard from '~/components/ArticleCard.vue' 13import BreadCrumb from '~/components/BreadCrumb.vue' 14import { createClient } from '~/plugins/contentful.js' 15 16const client = createClient() 17export default { 18 components: { 19 SubHeader, 20 ArticleCard, 21 BreadCrumb 22 }, 23 asyncData({env, params}) { 24 return client 25 .getEntries(env.CTF_BLOG_POST_TYPE_ID) 26 .then(entries => { 27 return { 28 posts: entries.items 29 } 30 }) 31 .catch(console.error) 32 } 33} 34</script> 35 36<style lang="sass" scoped> 37div 38 .bg 39 background-color: #fff 40 padding: 1em .5em 41 .wrapper 42 width: 1000px 43 margin: 0 auto 44</style>

コンポーネント

vue

1<template lang="pug"> 2.article-card 3 p {{title}} 4 hr 5 vue-markdown {{body}} 6 hr 7 p {{created}} 8 hr 9 p {{updated}} 10 hr 11 p {{photo}} 12</template> 13 14<script> 15import VueMarkdown from 'vue-markdown' 16 17export default { 18 data: function() { 19 return { 20 imgUrl: null 21 } 22 }, 23 props: [ 24 'title', 25 'body', 26 'created', 27 'updated', 28 'photo' 29 ], 30 components: { 31 VueMarkdown 32 }, 33 created: function() { 34 this.imgUrl = this.photo 35 } 36} 37</script> 38 39<style lang="sass" scoped> 40.article-card 41 width: 100% 42 border: #ddd 2px solid 43 border-radius: 3px 44 margin-bottom: .5em 45 padding: .5em 46 overflow: hidden 47</style>

試したこと

vueでcontentfulを用いて画像を取得されている方の記事は一通りみて、いろいろな方法で取得を試みましたが、解決しませんでした。
その他の試したことは以下の方とすべて同じです。
https://github.com/KyleTryon/VidFireBlog/issues/1

原因がわかる方がいらっしゃるようでしたら、答えていただけると幸いです。

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

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

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

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

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

guest

回答1

0

自己解決

もともとあったコンテナで取得を試みていましたが、新しく自分で作ったコンテナで作り直したところ無事取得できました

投稿2019/01/20 15:41

cho5

総合スコア16

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

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

nakanot

2019/03/29 07:09

同じ問題で詰んでるんですけど、 「もともとあったコンテナで取得を試みていましたが、新しく自分で作ったコンテナで作り直したところ無事取得できました」 というのはcontentfulでspace or contentmodelを新たに作り直したということでしょうか。 他何かありましたら教えていただきたく思います。
cho5

2019/03/29 07:21

少し前のため、記憶が曖昧で申し訳ないですが、Create Spaceで新たなスペースを作ったと思います
nakanot

2019/03/29 07:22

いえいえ、ありがとうございます。 試して見ます。 ありがとうございます。
nakanot

2019/03/29 08:12

「少し前のため、記憶が曖昧で申し訳ないですが、Create Spaceで新たなスペースを作ったと思います」 なぜかこれで解決できました。。 コード部分もいじらずです。 cho5さんありがとうございます。 他の方の参考にもなればと。
cho5

2019/03/29 08:15

新しいスペースのAPIキーを用いても無理でしたか? いえいえ、お役に立てず申し訳ないです
nakanot

2019/03/29 08:23

いえ、解決できました! たぶん、全ての投稿に画像が入ってないとjsonがその部分発行されてないので、そこでエラーが出てる可能性もありそうです。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問