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

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

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

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

解決済

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

TMTN
TMTN

総合スコア49

Vue.js

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

1回答

-1評価

0クリップ

3174閲覧

投稿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

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

js

export default { data() { return { paginate: ["paginate-bookmarkList"], bookmarkList: [] }; }, components: { Header, List }, created() { firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .orderBy("time", "desc") .get() .then(snapshot => { snapshot.forEach(doc => { this.bookmarkList.push(doc.data()); }); }); } }; </script>

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

html

<template> <div class="list"> <div class="face face1 flex"> <div class="content"> <img class="profile-icon" width="50" height="50" :src=" returnUserData() ? returnUserData().uploadedImage.fileUrl : preview " /> <h3>{{ list.title }}</h3> </div> </div> <div class="face face2 flex"> <div class="content flex"> <button class="hide-btn" @click="deletePost">×</button> <p>{{ list.description }}</p> <router-link :to="`/chat/${list.id}`" class="join-btn flex">ルームへ参加</router-link> <!-- 「list.id」propsで親コンポーネントから取得したidを取得。--> <img src="../assets/ブックマーク保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="saveBookmark" /> <img src="../assets/ブックマーク未保存.jpg" alt="ブックマーク" class="bookmark-icon" @click="deleteBookmark" /> <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p> </div> </div> </div> </template>

js

export default { data() { return { bookmarkId: "", userDatas: [], preview: require("../assets/デフォルト画像.jpg") }; }, props: { list: { type: Object, required: true }, index: { type: Number }, bookmark: { type: Object, required: true, default:[], } }, methods: { saveBookmark() { const ref = firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .doc(); const id = ref.id; firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .doc(id) .set({ bookmarkId: id, ...this.list, time: firebase.firestore.FieldValue.serverTimestamp() }) .then(() => { this.$swal("ブックマークに追加しました。", { icon: "success" }); }) .catch(() => { this.$swal("ブックマークを追加出来ません。", { icon: "error" }); }); }, deleteBookmark() { firebase .firestore() .collection("users") .doc(this.$route.params.uid) .collection("bookmarks") .doc(this.list.bookmarkId) .delete() .then(() => { this.$swal("ブックマークを取り消ししました。", { icon: "success" }); this.$router.go({ path: `/bookmark/${this.$route.params.uid}`, force: true }); }) .catch(() => { this.$swal("ブックマークを取り消し出来ません。", { icon: "error" }); }); }, }; </script>

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

Vue.js

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