前提・実現したいこと
todoリストを作成しており、リストの中にカードを入れる処理を行っています。
発生している問題・エラーメッセージ
リストの中にカードを追加できず以下のようなエラーが出ています。
Invalid prop: type check failed for prop "cards". Expected Array, got Undefined Error in v-on handler: "TypeError: Cannot read property 'push' of undefined" TypeError: Cannot read property 'push' of undefined
該当のソースコード
vue.js
1CardAdd.vue 2<template> 3 <form class="addcard" v-on:submit.prevent="addCard"> 4 <input 5 v-model="body" 6 type="text" 7 class="text-input" 8 placeholder="Add new card" 9 /> 10 11 <button type="submit" class="add-button">Add</button> 12 </form> 13</template> 14 15<script> 16export default { 17 data: function () { 18 return { 19 body: "", 20 } 21 }, 22 23 methods: { 24 addCard: function () { 25 this.$emit("emitaddCard", this.body) 26 }, 27 }, 28} 29</script> 30 31List.vue 32<template> 33 <div class="list"> 34 <div class="listheader"> 35 <p class="list-title">{{ title }}</p> 36 37 </div> 38 <Card 39 v-for="(item, index) in cards" 40 v-bind:body="item.body" 41 v-bind:key="item.id" 42 v-bind:cardIndes="index" 43 v-bind:listIndex="listIndex" 44 ></Card> 45 <CardAdd v-on:emitaddCard="addCardToList"></CardAdd> 46 </div> 47</template> 48 49<script> 50import CardAdd from "./CardAdd.vue" 51import Card from "./Card.vue" 52 53export default { 54 components: { 55 CardAdd, 56 Card, 57 }, 58 props: { 59 title: { 60 type: String, 61 required: true, 62 }, 63 64 cards: { 65 type: Array, 66 required: true, 67 }, 68 listIndex: { 69 type: Number, 70 required: true, 71 }, 72 }, 73 74 methods: { 75 addCardToList: function (body) { 76 this.cards.push({ body: body }) 77 }, 78 79 }, 80} 81</script> 82 83
試したこと
CardAdd.vueからList.vueにemitを用いてカードを受け渡した。現在行き詰ってしまっているので教えて頂けると幸いです。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。