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

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

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

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

解決済

nuxt.js + microCMS でブログを作成したが、詳細ページが作成できない

massanmesu
massanmesu

総合スコア0

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。

1回答

0評価

0クリップ

33閲覧

投稿2021/06/08 04:11

解決できないこと

microCMSで作成したブログの詳細ページを作ることができない。

やりたいこと

ポートフォリオサイトにブログを付けたい。
サイト全体をnuxtjsで実装しており、ブログ部分はmicroCMSで実装を考えている。

ブログ箇所のコード

vue

// pages/blog.vue <template> <div class="main-content"> <div class="l-content"> <div class="blog-block"> <div class="blog-block-list" v-for="(item, index) in items" :key="index"> <nuxt-link :to="'blog/' + item.id"> <p class="key-catch"> <img :src="item.key.url" alt=""></p> <div class="blog-info"> <h3 class="blog-title">{{ item.title }}</h3> </div> </nuxt-link> </div> </div> </div> </div> </template> <script> import axios from "axios"; export default { data() { return { items: [] }; }, async asyncData() { const{data} = await axios.get( 'https://dummy.microcms.io/api/v1/blog', { headers: { 'X-API-KEY': 'dummyAPI' } } ); return { items:data.contents }; } }; </script>

vue

//pages/blig/_id.vue <template> <div class="main-content"> <div class="l-content"> <h2>{{ item.title }}</h2> <div class="content" v-html="item.disc"></div> </div> </div> </template> <script> import axios from "axios"; export default { async asyncData({ params }) { const { data } = await axios.get( `https://dummy.microcms.io/api/v1/blog/${params.id}`, { headers: { 'X-API-KEY': 'dummyAPI' } } ); return { items:data }; } }; </script>

出ているエラー

GET https://dummy.microcms.io/api/v1/blog/undefined 404
Error: Request failed with status code 404
Uncaught (in promise) Error: Request failed with status code 404

試したこと

_id.vueの方から{ params }${params.id}の記述を取り除くと、一覧ページは表示されるようになりました。
つまり、_id.vueの方のURLがうまく取得できていないのではないかと考えましたが、それをどうやって解決すれば良いかがわかりません。

ご教授いただけますと幸いでございます。

参考にしたサイト

https://microcms.io/blog/create-nuxt-microcms-recruit
https://www.notion.so/microCMS-Nuxt-Jamstack-c7d68e68085a400f8eeb1887e97cdd6f
https://web-niar.com/blog/nuxtjs-microcms-vercel/

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

hoshi-takanori
hoshi-takanori

2021/06/08 04:34

Pods フォルダの中身は pod install すれば元に戻ると思います。
massanmesu
massanmesu

2021/06/08 05:36

別のエラーが発生しましたが、100件のエラーは無くなりました。ありがとうございました。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

iOS

iOSとは、Apple製のスマートフォンであるiPhoneやタブレット端末のiPadに搭載しているオペレーションシステム(OS)です。その他にもiPod touch・Apple TVにも搭載されています。

Xcode

Xcodeはソフトウェア開発のための、Appleの統合開発環境です。Mac OSXに付随するかたちで配布されています。