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

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

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

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

Nuxt.js

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

Q&A

解決済

2回答

1831閲覧

Nuxt.jsにて、Jsonの情報を受け渡す方法を教えてください。

Fujiyama

総合スコア22

Vue.js

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

Nuxt.js

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

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

0グッド

0クリップ

投稿2021/01/01 08:40

現在勉強として、WEBサイトをNuxt.jsを用いて作成しています。

そこで、メンバー情報をJsonから取得し、それをメンバー一覧に表示させようと思っているのですが、エラーが出てしまっているので、解決方法を教えていただけると助かります。

Members.json
→メンバー情報を入れてあるjsonです。

[ { "memberId": 1, "thumbnail": "members/h-muramatsu.png", "role": "プロデューサー", "name": “hogehoge”, "profile": "プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。プロフィール説明文章がここに入ります。" }, ]

MemberItem.vue
→ メンバー一覧に表示させるためのメンバーカードです。

<template> <div class="member-item"> <img class="member-item__thumbnail" :src="loadImg(member.thumbnail)" alt /> <div class="member-item__role">{{ member.role }}</div> <div class="member-item__name">{{ member.name }}</div> </div> </template> <script> export default { name: "MemberItem", props: "member", methods: { loadImg(fileName) { return require(`~/assets/${fileName}`); } } }; </script>

about.vue
→ メンバー一覧を表示させるaboutページです。

<template> <div class="about__member"> <h1 class="about__title">MEMBER</h1> <div class="about__member-list"> <MemberItem :member="member" v-for="member in members" :key="member.memberId" /> </div> </div> </template> <script> import members from '~/assets/json/members.json'; import MemberItem from "@/components/MemberItem.vue"; export default { components: { MemberItem }, data(){ return { members: members } } }; </script>

上記スクリプトでABOUTページを開くと、
「Cannot read property 'thumbnail' of undefined」(components/MemberItem.vue)
と表示されてしまいます。

いろいろ試してみたのですが、MemberItem.vueにJsonの情報を渡して、メンバー一覧をABOUTページに表示させるにはどうすればいいいでしょうか、ご教授いただけると助かります。

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

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

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

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

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

guest

回答2

0

自己解決

props は配列で渡す必要があったため、MemberItem.vue内のprops: ["member"],としたら治りました。

投稿2021/01/03 07:36

Fujiyama

総合スコア22

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

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

0

見た感じ正しく動きそうですね、、、
jsonの配列の最後のカンマを削るとうまく行きませんか?
末尾のカンマ - JavaScript | MDN

投稿2021/01/01 13:55

szk.

総合スコア1400

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

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

Fujiyama

2021/01/01 14:24

ご回答ありがとうございます。カンマを消したのですが、治らずといった形です、、
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問