【Vue.js】レコードを削除した後も、意図したlist.idを持ったレコードの状態を変更できるようにしたい

Question

【Vue.js】レコードを削除した後も、意図したlist.idを持ったレコードの状態を変更できるようにしたい

現在vue.jsでtodoリストを作成中です。

特定のレコードを削除した後、新たに特定のレコードの状態変更ボタンを押下した際、以下のエラーが出てしまってうまくいかず詰まっています。。
エラー

[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'state' of undefined"

やりたいこと
レコードを削除した後も、意図したlist.idを持ったレコードの状態を変更できるようにしたい

状況
編集中のコードは現在以下のようになっています。
削除

    deleteTask(list_id) {
      this.lists.splice(list_id, 1)
    },

状態変更

    changeTaskState(list_id) {
        this.lists[list_id].state = !this.lists[list_id].state
    },

全体

<template>
  <div id="app">
    <div class="title">
      <h1>Todoリスト</h1>
    </div>
    <div class="main">
      <div class="switch">

        <ul class="show-list">
          <li v-for="item in items" :key="item.id">
            <input type="radio" name="show" :id="item.id" :value="item.value" v-model="show">
            <label :for="item.id">{{item.text}}</label>
          </li>
        </ul>

      </div>
      <div class="tasks">
        <table>
          <tr>
            <th>ID</th>
            <th>コメント</th>
            <th>状態</th>
          </tr>
          <tr v-for="(list, index) in showTasks" v-bind:key="index">
            <td>{{ list.id }}</td>
            <td>{{ list.comment }}</td>
            <td v-if="list.state"><button @click="changeTaskState(list.id)">作業中</button></td>
            <td v-else><button @click="changeTaskState(list.id)">完了</button></td>
            <td><button @click="deleteTask(list.id)">削除</button></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="addTask">
      <h1>新規タスクの追加</h1>
        <div class="form">
          <form @submit.prevent>
              <input type="text" v-model="comment">
              <input type="submit" value="送信" @click="addTask">
          </form>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      items: [
        {id: 'all', value: 0, text: 'すべて'},
        {id: 'doing', value: 1, text: '作業中'},
        {id: 'done', value: 2, text: '完了'}
      ],
      lists: [],
      comment: '',
      show: 0,
      idNum: 0,
    }
  },
  methods: {
    addTask: function(){
      const todo = {
        comment: this.comment,
        state: true,
        id: this.idNum
      }
      this.idNum++
      this.lists.push(todo)
      this.comment = '';
    },
    deleteTask(list_id) {
      this.lists.splice(list_id, 1)
    },
    changeTaskState(list_id) {
        this.lists[list_id].state = !this.lists[list_id].state
    },
  },
  computed: {
    showTasks() {
      switch(this.show) {
        case 0:
          return this.lists;
        // 作業中の場合stateがtrueのものだけ表示させる
        case 1:
          return this.lists.filter(e => e.state)
        // 完了の場合stateがfalseのものだけ表示させる
        case 2:
          return this.lists.filter(e => !e.state)
        default:
          return []
      }
    }
  }
};

</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.show-list {
  display: flex;
  margin: 5px 0;
}
</style>

質問
引数の指定の仕方は以下で良いでしょうか。
changeTaskState(list_id)

changeTaskStateの中で以下をしようとしてますが、考え方としてあっていますでしょうか。
this.lists.listのidがlist.idと一致するthis.lists.stateを変更する

どのコード部分が上記エラーを招いているのでしょうか。。

参考にしている記事
https://www.malanka.tech/entry/Passes-arguments-to-the-methods-to-be-executed-by-Vuejs-click
https://teratail.com/questions/259091

Answer 1

以下のような方法で自己解決致しました。

<template>
  <div id="app">
    <div class="title">
      <h1>Todoリスト</h1>
    </div>
    <div class="main">
      <div class="switch">
        <ul class="show-list">
          <li v-for="item in items" :key="item.id">
            <input type="radio" name="show" :id="item.id" :value="item.value" v-model="show">
            <label :for="item.id">{{item.text}}</label>
          </li>
        </ul>
      </div>
      <div class="tasks">
        <table>
          <tr>
            <th>ID</th>
            <th>コメント</th>
            <th>状態</th>
          </tr>
          <tr v-for="(list, index) in showTasks" v-bind:key="index">
            <td>{{ list.id }}</td>
            <td>{{ list.comment }}</td>
            <td v-if="list.state"><button @click="changeTaskState(list.id)">作業中</button></td>
            <td v-else><button @click="changeTaskState(list.id)">完了</button></td>
            <td><button @click="deleteTask(list.id)">削除</button></td>
          </tr>
        </table>
      </div>
    </div>
    <div class="addTask">
      <h1>新規タスクの追加</h1>
        <div class="form">
          <form @submit.prevent>
              <input type="text" v-model="comment">
              <input type="submit" value="送信" @click="addTask">
          </form>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      items: [
        {id: 'all', value: 0, text: 'すべて'},
        {id: 'doing', value: 1, text: '作業中'},
        {id: 'done', value: 2, text: '完了'}
      ],
      lists: [],
      comment: '',
      show: 0,
    }
  },
  methods: {
    addTask: function(){
      const todo = {
        comment: this.comment,
        state: true,
        id: this.lists.length
      }
      this.lists.push(todo)
      this.comment = '';
    },
    deleteTask(list_id) {
      if (list_id > -1) {
      this.lists.splice(list_id, 1)
      this.lists.forEach((list, index) => { // 修正箇所： idの振り直し
          list.id = index;
        })
      }
    },
    changeTaskState(list_id) {
      //ボタンを押下したときlist_idの元の場所のレコードが反応してしまう
        this.lists[list_id].state = !this.lists[list_id].state
    },
  },
  computed: {
    showTasks() {
      switch(this.show) {
        case 0:
          return this.lists;
        // 作業中の場合stateがtrueのものだけ表示させる
        case 1:
          return this.lists.filter(e => e.state)
        // 完了の場合stateがfalseのものだけ表示させる
        case 2:
          return this.lists.filter(e => !e.state)
        default:
          return []
      }
    }
  }
};

</script>

<style scoped>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.show-list {
  display: flex;
  margin: 5px 0;
}
</style>

Answer 2

＞どのコード部分が上記エラーを招いているのでしょうか。。

たとえば最初に下記のように３つのtodoを追加して
0 aaa　[完了]
1 bbb　[完了]
2 ccc [完了]
となっているとき、
this.listsは
[{id:0, comment:"aaa"}, {id:1, comment:"bbb"}, {id:2, comment:"ccc"}]
になります。

ここで、id：1のtodoを、削除ボタンをクリックして削除すると
this.listsは
[{id:0, comment:"aaa"}, {id:2, comment:"ccc"}]

となります。

この時点で、this.listsという配列のインデックス番号と、２つめのtodoオブジェクトのidが異なっている状態になります。

元コードでは、これら（配列のインデックスとその中の各todoのid）が常に同じ数字になるという想定で組まれているため、うまく動作していないのだと考えられます。

直すならば下記のようになるかと。（もっとうまいやり方はあるかもしれませんが）

・changeTaskState()に対しては、todoオブジェクトを直接渡し、そのtodoオブジェクトのstateを変更するようにします。
・deleteTask()に対しては、表示されているtodoの配列(this.lists)のインデックス番号を渡すようにします。

<template>
（略）

          <tr v-for="(list, index) in showTasks" v-bind:key="index">
            <td>{{ list.id }}</td>
            <td>{{ list.comment }}</td>
            <td v-if="list.state"><button @click="changeTaskState(list)">作業中</button></td>
            <td v-else><button @click="changeTaskState(list)">完了</button></td>
            <td><button @click="deleteTask(index)">削除</button></td>
          </tr>
(略）
</template>

<script>

export default {
(略）
  methods: {
    addTask: function(){
      const todo = {
        comment: this.comment,
        state: true,
        id: this.idNum
      }
      this.idNum++
      this.lists.push(todo)
      this.comment = '';
    },
    // 表示されている配列のindexを渡す。
    deleteTask(index) {
      this.lists.splice(index, 1)
    },
    // todoオブジェクトを渡し、そのtodoオブジェクトのstateを変更する。
    changeTaskState(list) {
        list.state = !list.state
    },
  },
(以下略）

lists→todos
list→todo
addTask→addTodo
deleteTask→deleteTodo
に変数名を変更した方がわかりやすくなるかもしれません。

Comments

[tanoken729]

ご回答ありがとうございますmm
自己解決致しました！
いただいたご回答でも試し、勉強させていただきます！