Vue.jsでTodoアプリ作成。完了のラジオボタンを選択中に新規タスクを追加しても作業中のタスクが表示されないようにしたい。

Question

前提・実現したいこと

完了のラジオボタンを選択中に新規タスク追加した際に、作業中のタスクが表示されないようにしたい。
反対に作業中のラジオボタン選択中に「作業中」のボタンを押して「完了」に変わった瞬間に状態が完了になったものは表示されないようにしたい。

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

このように完了のラジオボタンを選択している時にタスクを追加すると作業中のタスクまで表示されてしまいます。
特にエラーは出ていません。

該当のソースコード

<template>
  <div>
    <h1>ToDoリスト</h1>
    <form>
      <input type="radio" name="state" id="allTodo" checked v-on:change="allTodo" />
      <label for="allTodo">すべて</label>
      <input type="radio" name="state" id="workingTodo" v-on:change="workingTodo" />
      <label for="workingTodo">作業中</label>
      <input type="radio" name="state" id="doneTodo" v-on:change="doneTodo" />
      <label for="doneTodo">完了</label>
    </form>

    <div>
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>コメント</th>
            <th>状態</th>
          </tr>
        </thead>

        <tbody id="todoList">
          <tr
            v-for="(todo, index) in todos"
            :key="todo.state"
            v-bind:class="{ hide: todo.viewChange}"
          >
            <td>{{ index }}</td>
            <td>{{ todo.task }}</td>
            <td>
              <button class="state-management-button" @click="changeState(index)">{{ todo.state }}</button>
            </td>
            <td>
              <button @click="deleteTask(index)">削除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <h2>新規タスクの追加</h2>
    <form>
      <input type="text" class="todoInput" v-model="newTask" />
      <button type="submit" value="追加" @click="addNewTask">追加</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newTask: "",
      todos: []
    };
  },
  methods: {
    addNewTask(e) {
      e.preventDefault();
      if (this.newTask.match(/\S/g)) {
        this.todos.push({
          task: this.newTask,
          state: "作業中",
          viewChange: false
        });
      }
      this.newTask = "";
    },
    deleteTask(id) {
      if (id > -1) {
        this.todos.splice(id, 1);
      }
    },
    changeState(id) {
      if (this.todos[id].state === "作業中") {
        this.todos[id].state = "完了";
      } else if (this.todos[id].state === "完了") {
        this.todos[id].state = "作業中";
      }
    },
    workingTodo(e) {
      if (e.target.checked) {
        this.todos.forEach(todo => {
          if (todo.state === "完了") {
            todo.viewChange = true;
          } else {
            todo.viewChange = false;
          }
        });
      }
    },
    doneTodo(e) {
      if (e.target.checked) {
        this.todos.forEach(todo => {
          if (todo.state === "作業中") {
            todo.viewChange = true;
          } else {
            todo.viewChange = false;
          }
        });
      }
      console.log(e.target.checked);
    },
    allTodo(e) {
      if (e.target.checked) {
        this.todos.forEach(todo => {
          todo.viewChange = false;
        });
      }
    }
  }
};
</script>

<style scoped>
.state-management-button {
  margin-right: 10px;
}

.todoInput {
  margin-right: 10px;
}

.hide {
  display: none;
}
</style>

Vue.jsでコードを書いています。

今は、作業中、完了のそれぞれのラジオボタンが選択をした時に
それぞれのタスクが保持しているstateの状態によってCSSの.hideを
付けたり外したりして表示・非表示を制御してます

試したこと

当初は各メソッドでe.target.checkedを付けずに実装しておりそれでも表示・非表示はできる状態です。

試しにe.target.checkedを付けて実装してみたのですが状況変わらずでした。

何かいい方法があればご教授いただければと思い質問させていただきました????‍♂️

Answer 1

算出プロパティ(computed)を利用してTODOリストを表示用に加工して画面に表示するのはいかがでしょうか？
ご参考になれば幸いです。

          <tbody id="todoList">
            <tr v-for="(todo, index) in viewTodos" :key="index"> // todos → viewTodos に変更
              <td>{{ todo.id}}</td> // 修正箇所:index→todo.idに変更
              <td>{{ todo.task }}</td>
              <td>
                <button
                  class="state-management-button"
                  @click="changeState(todo.id)" // 修正箇所:index→todo.idに変更
                >
                  {{ todo.state }}
                </button>
              </td>
              <td>
                <button @click="deleteTask(todo.id)">削除</button>  // 修正箇所:index→todo.idに変更
              </td>
            </tr>
          </tbody>

　　<script>
      {
        data() {
          return {
            newTask: "",
            todos: [],
            displayState: ""
          };
        },
        computed: { // 算出プロパティを追加
          viewTodos() {
            return this.displayState
              ? this.todos.filter((i) => i.state === this.displayState)
              : this.todos;
          }
        },
        methods: {
          addNewTask(e) {
            e.preventDefault();
            if (this.newTask.match(/\S/g)) {
              this.todos.push({
                id: this.todos.length, // 修正箇所：タスク追加時にidを付与
                task: this.newTask,
                state: "作業中" // 利用しないため、viewChangeを削除
              });
            }
            this.newTask = "";
          },
          deleteTask(id) {
            if (id > -1) {
              this.todos.splice(id, 1);
              this.todos.forEach((todo, index) => { // 修正箇所： idの振り直し
                todo.id = index;
              });
            }
          },
          changeState(id) {
            const todo = this.todos[id]; // 修正箇所： idの検索
            if (todo.state === "作業中") {
              todo.state = "完了";
            } else if (todo.state === "完了") {
              todo.state = "作業中";
            }
          },
          workingTodo() { // 変更
            this.displayState = "作業中";
          },
          doneTodo() { // 変更
            this.displayState = "完了";
          },
          allTodo() { // 変更
            this.displayState = "";
          }
        }
      });
    </script>

Comments

[F_Yohei]

ありがとうございます????‍♂️

こちらのコードで試してみたところ、完了のラジオボタン選択中にタスクを追加したところ作業中のタスクは表示されなくなりましたが、その後に作業中のラジオボタンを選択し、作業中のボタンをクリックしたところ、タスクが増えたり減ったりするような挙動になってしまいました。汗

[Twoshi]

ご確認いただきありがとうございます！

ラジオボタン「作業中」を選択中で「作業中」ボタンをクリックした場合、状態が「完了」になるため、作業中タスクが減ると思いますが、想定した挙動ではないでしょうか？
作業中タスクを選択中に「作業中」ボタンをクリックした場合、状態が「完了」になるが、表示はそのまましたいということでよろしいでしょうか？

[Twoshi]

失礼いたしました。
動作確認しコメントいただいた内容理解いたしました。
原因として変更対象のtodoのIDがindexのままとなっていたためでした。

上記回答を修正いたします。

[F_Yohei]

想像していた通りの挙動になりました！
ありがとうございます????‍♂️

ちなみになんですけど、どこを修正したのか教えていただけますでしょうか？
修正前のコードがあると助かります????

[F_Yohei]

他に問題がないか確かめたところ削除ボタンを押した時に削除されないタスクが出てきました。

[Twoshi]

ご確認いただきありがとうございます！
修正箇所にコメントを追加いたしました！

> 修正前のコードがあると助かります????
修正前のコードは、ご質問で記載いただいているコードとなりますm(_ _)m

[Twoshi]

削除ボタン押下処理のご確認をいただきありがとうございます！
削除処理の修正が漏れておりました。

修正いたしましたので、ご確認お願いいたします。

[F_Yohei]

修正していただきありがとうございます????

求めていた挙動になりました????‍♂️

表示させる時はcomputedプロパティを使うといいんですね????

[Twoshi]

ご確認いただきありがとうございます！
求められていた挙動になりよかったです！

少しでもお役に立てたのであれば、幸いですm(_ _)m

[F_Yohei]

何度もすみません。

なぜこのように処理を記載するのか教えていただけると助かります????‍♂️

const oldId = this.todos.length
? this.todos[this.todos.length - 1].id
: 0;

単純に

const oldId = this.todos.lengthではダメなのでしょうか？

[Twoshi]

ご質問いただきありがとうございます！

IDの重複を防ぐため、上記のような記述といたしました。
現在のソースはIDを登録時に生成するようにしています。

例えば タスクを登録し、IDが[1, 2, 3] あったとします。
途中で2を削除した場合、[1, 3] のIDが残ります。
そこにタスクを追加した場合、それぞれ以下となります。
1.const oldId = this.todos.length; の場合、length = 2 となるためIDが[1, 3, 3]
2.const oldId = this.todos.length ? this.todos[this.todos.length - 1].id : 0; の場合、
　配列の最後のタスクのID = 3を取得するためIDが[1, 3, 4]となります。

そのため、2のようなIDの重複を防ぐ記述といたしました。
わかりにくい説明かもしれませんが、よろしくお願いいたします。
ご不明点あればお気軽にご質問いただければと思います。

[F_Yohei]

ありがとうございます????‍♂️

とてもわかりやすいです。

例えばなのですが、削除ボタンを押した時にIDの番号が振り直される処理も今の状態から可能でしょうか？

[Twoshi]

はい、可能です！

その場合、以下の処理は不要になります。
const oldId = this.todos.length ? this.todos[this.todos.length - 1].id : 0;

回答のソースを修正いたします。

[F_Yohei]

すごいです！！
ありがとうございます????‍♂️

削除ボタンをクリック時に、配列からオブジェクトを１つ削除した後forEachで配列の中身をひとつずつ回しidを書き換えることができるんですね！！

forEachのなかでtodos配列にpushするのかと思っていたのですが、それをしなくてもidが振り直されるのが不思議だなと思いました????

どのような原理で振り直しされてるのか、もしよければ教えていただけますでしょうか？

何度も何度も申し訳ないです????‍♂️

[Twoshi]

ご質問いただきありがとうございます！

forEachは配列の要素を一つずつ取り出し参照しているだけです。
そのため、参照している値を書き換えれば値が変わります。

F_Yohei様も元々同じことをされています。
changeState()関数で記述されていた以下の箇所です。
> this.todos[id].state = "完了";

こちらもthis.todosの一つの要素を参照され参照された要素のstateに"完了"を上書きされています。

今回のforEachでは 配列をループさせ、一つずつ要素を取り出しidを上書きしています。

ご参考になれば、幸いです^^

[F_Yohei]

かなりわかりやすいです????

オブジェクトの中のプロパティの値はロックされていないので、書き換えが可能でしたね！！

納得しました。
何度もありがとうございます????‍♂️

ようやく完成しました????