はじめに
こんにちは。
こちらの記事では、microCMSのAPIデータを元に繰り返し描画を行う方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。
実装手順
1. microCMSからAPIデータを取得する
Nuxtの拡張子.vueファイルでは、asyncDataを使ってaxios通信を行います。
retrunで返したcontentsには、microCMSに入力したすべてのデータが配列で格納されています。（contents[0].idを選択した場合は、配列の1番目のデータのIDが反映されます）
データの取得方法については、過去のこちらの記事に記載しております。
script
<script>
import axios from "axios";
export default {
async asyncData() {
const test = await axios.get(
'https://サービス名.microcms.io/api/v1/APIのエンドポイント',
{
headers: { "X-API-KEY": "APIキーを入力" }
}
);
const contents = test.data.contents
return {contents}
}
}
</script>
2. v-forでタイトルを繰り返し描画する
先ほど取得した配列が格納されているcontentsを、v-forのlistに格納する。また、keyにはv-bindでIDを設定する。
v-forの形式は、v-for = "変数 in 配列"になります。
※マスタッシュ構文で描画するlist.titleのtitleには、microCMSのAPI設定で任意で設定した「フィールドID」が入る。
template
<template>
<ul>
<li v-for="list in contents" :key="list.id">
<h1>{{ list.title }}</h1>
</li>
</ul>
</template>
配列の数だけ繰り返し描画されるので、データが５件あれば５回描画されます。
タイトル１
タイトル2
タイトル3
タイトル4
タイトル5
3. リンクや画像も表示させる
idを選択することでページ遷移リンクを設定できたり、imgタグのsrcにURLを設定することで、画像も描画することができます。
template
<template>
<ul>
<li v-for="list in contents" :key="list.id">
<nuxt-link :to="list.id">
<h1>{{ list.title }}</h1>
</nuxt-link>
<div>
<img :src="list.image.url" />
</div>
</li>
</ul>
</template>
参考
おわりに
ここまでmicroCMSのAPIデータを元に繰り返し描画を行う方法についてまとめました。
これからもつまづいたことや機能の実装方法について記事にしていきます！
以上、最後まで読んでいただきありがとうございました！
よければLGTMを押してくれると嬉しいです！