前提・実現したいこと
Todoリストを作成しています。現在リストの削除処理を行いたいのですがうまくいきません。
発生している問題・エラーメッセージ
Error in v-on handler: "TypeError: Cannot read property 'splice' of undefined" TypeError: Cannot read property 'splice' of undefined
該当のソースコード
vue.js
1//List.vue 2<template> 3 <div class="list"> 4 <div class="listheader"> 5 <p class="list-title">{{ title }}</p> 6 <!--<p class="list-counter">total:{{ totalCardInList }}</p> --> 7 <div class="deletelist" v-on:click="removeList">×</div> 8 </div> 9 <Card 10 v-for="(item, index) in cards" 11 v-bind:body="item.body" 12 v-bind:key="item.id" 13 v-bind:cardIndes="index" 14 v-bind:listIndex="listIndex" 15 ></Card> 16 <CardAdd v-on:emitaddCard="addCardToList"></CardAdd> 17 </div> 18</template> 19 20<script> 21import CardAdd from "./CardAdd.vue" 22import Card from "./Card.vue" 23 24export default { 25 components: { 26 CardAdd, 27 Card, 28 }, 29 props: { 30 title: { 31 type: String, 32 required: true, 33 }, 34 35 cards: { 36 type: Array, 37 required: true, 38 }, 39 listIndex: { 40 type: Number, 41 required: true, 42 }, 43 }, 44 45 methods: { 46 addCardToList: function (body) { 47 this.cards.push({ body: body }) 48 }, 49 removeList: function (listIndex) { 50 this.lists.splice(listIndex, 1) 51 }, 52 }, 53} 54</script> 55 56//Board.vue 57<template> 58 <div> 59 <header>????Training Note????</header> 60 61 <main> 62 <p class="info-line">0 tasks</p> 63 <div class="list-index"> 64 <List 65 v-for="(item, index) in lists" 66 v-bind:key="item.id" 67 v-bind:title="item.title" 68 v-bind:cards="item.cards" 69 v-bind:listIndex="index" 70 ></List> 71 </div> 72 73 <ListAdd v-on:emitadd="addList"></ListAdd> 74 </main> 75 </div> 76</template> 77 78<script> 79import ListAdd from "./ListAdd.vue" 80import List from "./List.vue" 81export default { 82 data: function () { 83 return { 84 lists: [ 85 { title: "Track and Field", cards: [{ body: "300m" }] }, 86 { title: "Todo", cards: [] }, 87 ], 88 } 89 }, 90 methods: { 91 addList: function (title) { 92 console.log(title) 93 this.lists.push({ title: title, cards: [] }) 94 }, 95 }, 96 97 components: { 98 ListAdd, 99 List, 100 }, 101} 102</script> 103 104 105
試したこと
vue.js
1 removeList: function (listIndex) { 2 this.lists.splice(listIndex, 1) 3 }, 4```のようにボタンを押すと削除するように書いたがspliceがundefindedとでてしまいます。 5どうかご教授願います。 6 7### 補足情報(FW/ツールのバージョンなど) 8 9ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー