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

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

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

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

リストボックス

ユーザーがリストから1つ以上のアイテムを選択できるようにするGUI要素です。

Q&A

解決済

2回答

1040閲覧

Todoリストの中にカードを追加する際のエラーで困っています。

runrunrun

総合スコア2

Vue.js

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

Vue CLI

Vue CLIは、Vue.jsでアプリケーション開発を行うためのコマンドラインインタフェース(CLI)に基づいた開発ツールです。インタラクティブなプロジェクトの雛形や設定なしで使用できるプロトタイプの作成など、さまざまな機能が用意されています。

リストボックス

ユーザーがリストから1つ以上のアイテムを選択できるようにするGUI要素です。

0グッド

0クリップ

投稿2021/08/16 15:42

編集2021/08/16 15:51

前提・実現したいこと

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/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答2

0

新たに追加したリストにカードの配列が受け渡されていなかったので

vue.js

1addList: function (title) { 2 console.log(title) 3 this.lists.push({ title: title, cards: [] }) 4 }, 5```のようにした

投稿2021/08/17 03:04

runrunrun

総合スコア2

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

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

0

ベストアンサー

Cannot read property 'push' of undefined

undefinedpush というプロパティはない、というエラーです。
つまり、 下記の時点で this.cardsundefined であるということです。

addCardToList: function (body) { this.cards.push({ body: body }) }

List コンポーネントを呼び出す際に cards がプロパティとして渡されていないのではないでしょうか?

投稿2021/08/16 16:19

mather

総合スコア6753

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

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

runrunrun

2021/08/17 01:54

ご回答ありがとうございます。 こちらListコンポーネントを呼び出しているboard.vueですがcardsをv-bindさせています。 <template> <div> <header>????Training Note????</header> <main> <p class="info-line">0 tasks</p> <div class="list-index"> <List v-for="(item, index) in lists" v-bind:key="item.id" v-bind:title="item.title" v-bind:cards="item.cards" v-bind:listIndex="index" ></List> </div> <ListAdd v-on:emitadd="addList"></ListAdd> </main> </div> </template> <script> import ListAdd from "./ListAdd.vue" import List from "./List.vue" export default { data: function () { return { lists: [ { title: "Track and Field", cards: [{ body: "300m" }] }, { title: "Todo", cards: [] }, ], } }, methods: { addList: function (title) { console.log(title) this.lists.push({ title: title }) }, }, components: { ListAdd, List, }, } </script> またListコンポーネントにもプロパティで cards: { type: Array, required: true, }, のようにしているのですが、うまくいきません、、
runrunrun

2021/08/17 02:01

無事解決しました。 この度はありがとうございました。
mather

2021/08/17 02:25

この質問の内容をご自身で振り返ったり、検索でヒットして他の誰かに見られたときのために、どのようにして解決したか記載しておくと親切です。
runrunrun

2021/08/17 03:05

承知致しました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問