todoリストを削除ボタンを押すと削除できるようにしたい

Question

前提・実現したいこと

Todoリストを作成しています。現在リストの削除処理を行いたいのですがうまくいきません。

発生している問題・エラーメッセージ

Error in v-on handler: "TypeError: Cannot read property 'splice' of undefined"
TypeError: Cannot read property 'splice' of undefined

該当のソースコード

//List.vue
<template>
  <div class="list">
    <div class="listheader">
      <p class="list-title">{{ title }}</p>
      <!--<p class="list-counter">total:{{ totalCardInList }}</p> -->
      <div class="deletelist" v-on:click="removeList">×</div>
    </div>
    <Card
      v-for="(item, index) in cards"
      v-bind:body="item.body"
      v-bind:key="item.id"
      v-bind:cardIndes="index"
      v-bind:listIndex="listIndex"
    ></Card>
    <CardAdd v-on:emitaddCard="addCardToList"></CardAdd>
  </div>
</template>

<script>
import CardAdd from "./CardAdd.vue"
import Card from "./Card.vue"

export default {
  components: {
    CardAdd,
    Card,
  },
  props: {
    title: {
      type: String,
      required: true,
    },
    
    cards: {
      type: Array,
      required: true,
    },
    listIndex: {
      type: Number,
      required: true,
    },
  },
  
  methods: {
    addCardToList: function (body) {
      this.cards.push({ body: body })
    },
    removeList: function (listIndex) {
      this.lists.splice(listIndex, 1)
    },
  },
}
</script>

//Board.vue
<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, cards: [] })
    },
  },

  components: {
    ListAdd,
    List,
  },
}
</script>

試したこと

 removeList: function (listIndex) {
      this.lists.splice(listIndex, 1)
    },
```のようにボタンを押すと削除するように書いたがspliceがundefindedとでてしまいます。
どうかご教授願います。

### 補足情報（FW/ツールのバージョンなど）

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

Comments

[FKM]

そのlistsはどこから来ましたか？子コンポーネントのどこにも定義されてないようですが

[runrunrun]

たしかにそうですね。
親コンポーネントのboard.vueにlistsがあるので、Listコンポーネントで
props{
lists: {
type: Array,
required: true,
}
}
とlistsを受け渡したところ以下のようなエラーが出てしまいます。
Missing required prop: "lists"
すみません、これらを含めてご教授願います。

Answer 1

コンポーネント受け渡しの基本です。子コンポーネントのpropsは受け皿ですが、それを橋渡しする役割がv-bind:hogeです。なので、親コンポーネントにも書き足しましょう。

<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"
          v-bind:lists="lists"
>

Comments

[runrunrun]

なるほど。propsの基本が抜けていました。
修正したところしっかりと作動しました。
この度はありがとうございました。