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

#親から子へ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>

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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

投稿2021/06/12 03:09

momosan

総合スコア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 ------------------------------------------------------- ありがとうございました。助かりました。

行動規範の内容に同意します