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

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

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

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

Q&A

解決済

1回答

10271閲覧

【Vue】親から子へpropsでデータを渡したいが、「missing required prop」というエラーが出る

TMTN

総合スコア53

Vue.js

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

0グッド

0クリップ

投稿2021/06/11 17:10

#親から子へpropsでデータを渡したいが、「missing required prop」というエラーが出る

vue.runtime.esm.js?2b0e:619 [Vue warn]: Missing required prop: "bookmark" found in ---> <List> <Paginate> <Anonymous> <App> at src/App.vue <Root>

子コンポーネントのlist.vueはブックマーク一覧以外にも他の親コンポーネントで使っている為、
使い回しで使用しております。

他の親コンポーネントでpropsで「list」という変数名でデータの受け渡しは出来ているのですが、
新たにブックマーク一覧ページの為に、「bookmark」という変数名で同じやり方で子へデータを渡しているのですが
上記のようなエラーが出てデータを渡せない状況です。

原因が分からず困っております・・

分かる方いらっしゃいましたらお力添えを頂きたいです

宜しくお願い致します。

#bookmark.vue(親コンポーネント)

html

1<List v-for="(list) in paginated('paginate-bookmarkList')" :list="list" :bookmark="bookmarklist" :key="list.id"/>

js

1export default { 2 data() { 3 return { 4 paginate: ["paginate-bookmarkList"], 5 bookmarkList: [] 6 }; 7 }, 8 components: { 9 Header, 10 List 11 }, 12 created() { 13 firebase 14 .firestore() 15 .collection("users") 16 .doc(this.$route.params.uid) 17 .collection("bookmarks") 18 .orderBy("time", "desc") 19 .get() 20 .then(snapshot => { 21 snapshot.forEach(doc => { 22 this.bookmarkList.push(doc.data()); 23 }); 24 }); 25 } 26}; 27</script>

#list.vue(子コンポーネント)

html

1<template> 2 <div class="list"> 3 <div class="face face1 flex"> 4 <div class="content"> 5 <img 6 class="profile-icon" 7 width="50" 8 height="50" 9 :src=" 10 returnUserData() ? returnUserData().uploadedImage.fileUrl : preview 11 " 12 /> 13 <h3>{{ list.title }}</h3> 14 </div> 15 </div> 16 <div class="face face2 flex"> 17 <div class="content flex"> 18 <button class="hide-btn" @click="deletePost">×</button> 19 <p>{{ list.description }}</p> 20 <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link> 21 <!-- 「list.id」propsで親コンポーネントから取得したidを取得。--> 22 <img 23 src="../assets/ブックマーク保存.jpg" 24 alt="ブックマーク" 25 class="bookmark-icon" 26 @click="saveBookmark" 27 /> 28 <img 29 src="../assets/ブックマーク未保存.jpg" 30 alt="ブックマーク" 31 class="bookmark-icon" 32 @click="deleteBookmark" 33 /> 34 <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p> 35 </div> 36 </div> 37 </div> 38</template>

js

1export default { 2 data() { 3 return { 4 bookmarkId: "", 5 userDatas: [], 6 preview: require("../assets/デフォルト画像.jpg") 7 }; 8 }, 9 props: { 10 list: { 11 type: Object, 12 required: true 13 }, 14 index: { 15 type: Number 16 }, 17 bookmark: { 18 type: Object, 19 required: true, 20 default:[], 21 } 22 }, 23 24 methods: { 25 saveBookmark() { 26 const ref = firebase 27 .firestore() 28 .collection("users") 29 .doc(this.$route.params.uid) 30 .collection("bookmarks") 31 .doc(); 32 const id = ref.id; 33 firebase 34 .firestore() 35 .collection("users") 36 .doc(this.$route.params.uid) 37 .collection("bookmarks") 38 .doc(id) 39 .set({ 40 bookmarkId: id, 41 ...this.list, 42 time: firebase.firestore.FieldValue.serverTimestamp() 43 }) 44 .then(() => { 45 this.$swal("ブックマークに追加しました。", { 46 icon: "success" 47 }); 48 }) 49 .catch(() => { 50 this.$swal("ブックマークを追加出来ません。", { 51 icon: "error" 52 }); 53 }); 54 }, 55 deleteBookmark() { 56 firebase 57 .firestore() 58 .collection("users") 59 .doc(this.$route.params.uid) 60 .collection("bookmarks") 61 .doc(this.list.bookmarkId) 62 .delete() 63 .then(() => { 64 this.$swal("ブックマークを取り消ししました。", { 65 icon: "success" 66 }); 67 this.$router.go({ 68 path: `/bookmark/${this.$route.params.uid}`, 69 force: true 70 }); 71 }) 72 .catch(() => { 73 this.$swal("ブックマークを取り消し出来ません。", { 74 icon: "error" 75 }); 76 }); 77 }, 78 79}; 80</script>

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

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

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

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

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

guest

回答1

0

ベストアンサー

確証はないので間違っていたらすみません。

他の親コンポーネントでpropsで「list」という変数名でデータの受け渡しは出来ているのですが、
新たにブックマーク一覧ページの為に、「bookmark」という変数名で同じやり方で子へデータを渡しているのですが
上記のようなエラーが出てデータを渡せない状況です。

上記の文章的から推測なのですが、現在貼ってもらっている親コンポーネントから渡された値が間違っているのではなく、「他の親コンポーネント」側でbookmarkが足りていないことでエラーが出ているのではないでしょうか?

その他やることとしては
とりあえずrequiredを外して想定している変数が渡ってきているか確認する
とかでしょうか。デフォルト定義しているならrequiredも必要ない気がします。

投稿2021/06/12 03:09

soich

総合スコア176

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

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

TMTN

2021/06/12 03:21

soich様 ご回答ありがとうございます。 required:trueとしていたものを削除してみると以下のエラーが検出されたため object型にしていたものをarray型にしたらエラーは出なくなりました。 ------------------------------------------------------- [Vue warn]: Invalid prop: type check failed for prop "bookmark". Expected Object, got Array ------------------------------------------------------- ありがとうございました。助かりました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問