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

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

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

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

Contentful

Contentfulは、グラフィカルなUIを提供しないAPIベースのヘッドレスCMSです。従来のCMSと異なり、ディスクトップやモバイルを始めとするさまざまなプラットフォームへのコンテンツ配信が可能なAPIが用意されています。

Q&A

解決済

1回答

1035閲覧

contentfulで複数の投稿を取得したい

seisei

総合スコア19

Nuxt.js

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

Contentful

Contentfulは、グラフィカルなUIを提供しないAPIベースのヘッドレスCMSです。従来のCMSと異なり、ディスクトップやモバイルを始めとするさまざまなプラットフォームへのコンテンツ配信が可能なAPIが用意されています。

1グッド

0クリップ

投稿2020/08/06 05:14

編集2020/08/06 05:19

現在contentfulとnuxt.jsを使用した、簡易CMSサイトを作成中なのですが、複数の投稿(content_type)を別々で取得するやり方で詰まってしまっています。変数に入れて取得するやり方も試してみましたが、うまくいかず、、どのように取得すればいいでしょうか?

単品の投稿は下記の記述で取得できています。
今はworksしか取得できていないので、skillsも取得できるようにしたいです。

.env

CTF_SPACE_ID=XXXXXX CTF_CDA_ACCESS_TOKEN=XXXXXXX

plugin
contentful.js

const contentful = require('contentful') const config = { space: process.env.CTF_SPACE_ID, accessToken: process.env.CTF_CDA_ACCESS_TOKEN } export default contentful.createClient(config)
<template> <div> {{works}} </div> </template> <script> import contentfulClient from '@/plugins/contentful' export default { asyncData({ env }) { return contentfulClient .getEntries({ content_type: "works", }) .then((entries) => { return { works: entries.items } }) .catch(console.error) } } </script>

補足

ちなみにmicrocmsでは下記のような記述で複数取得ができたので、このような形で取得できたらと考えています。

async asyncData () { const worksdata = await axios.get(’XXXXXX',{headers: {'X-API-kEY':’XXXXXX'}}) const skillsdata = await axios.get(’XXXXXX',{headers: {'X-API-kEY’:’XXXXXX’}}) return { works: worksdata.data.contents, skills: skillsdata.data.contents, } }
tiffany_rom_24👍を押しています

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

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

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

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

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

guest

回答1

0

自己解決

下記で一応解決することができました。
ただもっといい記述方法などがあれば回答いただきたいです。

<template> <div> {{works}} {{skills}} </div> </template> <script> import contentfulClient from '@/plugins/contentful' export default { data(){ return{ works: '', skills:'' } }, async asyncData({ env }) { const works = await contentfulClient .getEntries({ content_type: "works", }) const skills = await contentfulClient .getEntries({ content_type: "skills", }) return{ works:works.items, skills:skills.items } } } </script>

投稿2020/08/06 07:20

seisei

総合スコア19

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問