Todoリスト　Vue.js 作業ボタンを完了ボタンに切り替えたい

前提・実現したいこと

<現状>

Vue.jsでtodoリストを作成しています。
現在、完了ボタンと作業中ボタンの設定をしています。

<実現したいこと>
作業中ボタンをクリックすると完了ボタンに切り替わり、
完了ボタンをクリックすると作業中ボタンに戻るようにしたいです。

ここに質問の内容を詳しく書いてください。

現在、作業中ボタンと実行中ボタンをトグルを使用して、trueとfalseで表示が切り替わるようにしているのですが、一つのボタンを押すと、全ての作業中ボタンが完了になってしまいます。
なので、ボタンを押した作業中ボタンだけ、切り替わるようにしたいです。

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

作業中のボタンが全て同時に切り替わってしまうので、
選択した作業中ボタンだけ、完了に表示を切り替えたい

該当のソースコード

Vuejs
1'use strict';
2
3new Vue({
4  el: '#app',
5  data:{
6    isActive: false,
7    newTask: '',
8    todos: [{
9      title: 'task1',
10      isActive: false
11    },
12    {
13      title: 'task2',
14      isActive: false
15    },
16    {
17      title: 'task3',
18      isActive: true
19    }
20  ]
21},
22methods: {
23  addTask: function() {
24    let item = {
25      title: this.newTask,
26      isActive: false
27    }
28    this.todos.push(item);
29    this.newTask ='';
30  },
31  statusChange: function(index) {
32    this.isActive = !this.isActive
33  },
34  deleteTask: function(index) {
35    if(confirm('are you sure?')) {
36      this.todos.splice(index, 1);
37    }
38  },
39  
40}
41});

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>ToDo List Vue-version</title>
7
8  <link rel="stylesheet" href="css/styles.css">
9</head>
10
11<body>
12  <h2>ToDoリスト</h2>
13  <input type="radio">すべて
14  <input type="radio">作業中
15  <input type="radio">完了
16  <p>ID コメント　状態</p>
17  <table></table>
18  <h2>新規タスクの追加</h2>
19  <div id="app">
20    <table>
21      <tr v-for="(task, index) in todos">
22      <td>{{ index }} {{ task.title }}</td>
23        <td><button @click="statusChange()">
24          <span v-if="isActive === false">作業中</span>
25          <span v-if="isActive === true">完了</span>
26        </button></td>
27        <td><button @click="deleteTask(index)">削除</button></td>
28      </tr>
29    </table>
30    <form @submit.prevent="addTask">
31      <input type="text" v-model="newTask">
32      <input type="submit" value="追加" class="button">
33    </form>
34  </div>
35  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
36  <script src="js/main.js"></script>
37</body>
38
39</html>

試したこと

Vue.jsでtoggleを使う方法
https://designsupply-web.com/media/knowledgeside/4811/
https://into-the-program.com/vue-elem-switch/

上記のサイトを参考にコードを記入しました。

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

行動規範の内容に同意します

回答1件

ベストアンサー

##原因
isActiveがすべて同じ値を指しているので、一個を変更したと思っても、全部連動しています。

せっかく、v-forした時にindexを指定しているのに、イベント内ではindexが仕事をしていません。悲しい。

直接関係はないけど、v-forをするときはv-bind:key="~~"は書きましょう。期待通りの動作をしなくなる場合があります。
公式ドキュメントにも、記載があります。

Vue が各ノードの識別情報を追跡できるヒントを与えるために、また、先ほど説明したような既存の要素の再利用と並び替えができるように、一意な key 属性を全てのアイテムに与える必要があります:

##修正箇所

htmlの以下と

          <span v-if="isActive === false">作業中</span>
          <span v-if="isActive === true">完了</span>

js以下

  statusChange: function(index) {
    this.isActive = !this.isActive
  }

のisActiveをtodos[index].isActiveに書き換えるといいかも！

##ちなみに私なら
こう書き換えます。

          <span v-if="isActive === false">作業中</span>
          <span v-if="isActive === true">完了</span>

          <--書き換えると-->
          <span v-show="task.isActive == false">作業中</span>
          <span v-show="task.isActive == true">完了</span>

v-ifはDOMから消したり追加したりするので、トグルのような頻繁に変わるものには向きません。
一方で、v-showは条件によってDOM要素をdisplay:none;するだけなので、ロードに時間は多少かかってしまいますが、その後は軽くなります。

これもドキュメントに記載があります。