【Vue ToDoリスト】　IDの連番、エラーについて

ToDoリストにおけるIDの連番、エラーについて

現在、Vueを使いTodoリストを作成しています。

リストを追加するとIDが振り当てられるように作成したいのですが、一度削除をして、追加を押すと連番にならず、削除したリストの次の数字から振り当てられてしまいます。
例：3つリストを追加し、全て削除してから新しく追加を押すと、0からではなく、ID4から追加されていってしまいます。

また、リストにIDを持たせたいのですが、削除すると連番に振りなおされてしまいます。
例：ID1，2，3　があり　　ID：2を削除したら　1，3が残るようにしたい

どのように書き換えればよいのでしょうか。
よろしくお願いいたします。

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

また、computedプロパティにエラーメッセージが出ているのですが、検索しても似たような記事が出てこなく詰まってしまったので、解決策いただけると嬉しいです、
（HTML内にVUEを読み込んで、書くスタイルだとこエラーは出なかったのですが、インストールして進めていく環境に持ってきたら、エラーメッセージが出てきてしまいました。）

 error  Expected to return a value in "filteredTodos" computed property

該当のソースコード

vue
1
2<template>
3  <div id="app">
4    <body>
5      <h1>ToDoリスト</h1>
6      <label
7        ><input
8          type="radio"
9          name="list"
10          value="all"
11          v-model="filter"
12        />すべて</label
13      >
14      <label
15        ><input
16          type="radio"
17          name="list"
18          value="active"
19          v-model="filter"
20        />作業中</label
21      >
22      <label
23        ><input
24          type="radio"
25          name="list"
26          value="completed"
27          v-model="filter"
28        />完了</label
29      >
30
31      <table>
32        <tr v-for="(todo, key) in filteredTodos" :key="key">
33          <td>{{ todo.id }}</td>
34          <td>{{ todo.title }}</td>
35          <td>
36            <button @click="statusChange(todo.id)">
37              <span>{{ todo.statusBtn }}</span>
38            </button>
39          </td>
40          <td>
41            <button @click="deleteTask(todo.id)">{{ todo.delBtn }}</button>
42          </td>
43        </tr>
44      </table>
45
46      <h2>新規タスクの追加</h2>
47      <form @submit.prevent="addTask">
48        <input type="text" v-model="newTask" />
49        <input type="submit" value="追加" class="button" />
50      </form>
51    </body>
52  </div>
53</template>
54
55<script>
56export default {
57  data() {
58    return {
59      id: 0,
60      statusBtn: "",
61      newTask: "",
62      todos: [],
63      filter: "all",
64    };
65  },
66  computed: {
67    filteredTodos() {
68      if (this.filter === "all") {
69        return this.todos;
70      } else if (this.filter === "completed") {
71        return this.todos.filter((todo) => {
72          return todo.statusBtn === "完了";
73        });
74      } else if (this.filter === "active") {
75        return this.todos.filter((todo) => {
76          return todo.statusBtn === "作業中";
77        });
78      }
79    },
80    methods: {
81      addTask: function () {
82        let item = {
83          id: this.id++,
84          title: this.newTask,
85          statusBtn: "作業中",
86          delBtn: "削除",
87        };
88        this.todos.push(item);
89        this.newTask = "";
90      },
91      statusChange: function (id) {
92        for (let todo of this.todos) {
93          if (todo.id === id) {
94            if (todo.statusBtn === "作業中") {
95              todo.statusBtn = "完了";
96            } else {
97              todo.statusBtn = "作業中";
98            }
99            break;
100          }
101        }
102      },
103      deleteTask: function (smt) {
104        let index = this.todos.indexOf(smt);
105        this.todos.splice(index, 1);
106      },
107    },
108  },
109};
110</script>

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

回答1件

ベストアンサー

一度削除をして、追加を押すと連番にならず、削除したリストの次の数字から振り当てられてしまいます。

this.idに対して追加処理のときにはインクリメントしてるのに、削除処理を行ったときには何も操作していないので当たり前だと思います。

ID1，2，3　があり　　ID：2を削除したら　1，3が残るようにしたい

let index = this.todos.indexOf(smt);

と記述していますが、Array.prototype.indexOf()は引数の内容と同じ値の配列要素の添字を返します。

<button @click="deleteTask(todo.id)">

ではidを渡しているので、値は一致するはずがありません。
一致しない場合は-1を返します。

Array.prototype.splice()の第一引数に-1を与えると、最後尾要素からの指定になります。2を削除したつもりが3を削除してるのでしょう。

this.todos.splice(smt, 1);

普通にコレでいいんじゃないでしょうか。
内容をconsoleに出力すればすぐに分かるミスなのでちゃんと確認するようにしてください。

error Expected to return a value in "filteredTodos" computed propertyについて

    filteredTodos() {
      if (this.filter === "all") {
        return this.todos;
      } else if (this.filter === "completed") {
        return this.todos.filter((todo) => {
          return todo.statusBtn === "完了";
        });
      } else if (this.filter === "active") {
        return this.todos.filter((todo) => {
          return todo.statusBtn === "作業中";
        });
      }
    },

この記述だと何にも当てはまらなかったときの返り値が指定されていません。
動作的には何にも当てはまないということは無いのかもしれませんが、構文的にはありえます。おそらくそれに対してワーニングをだしているのでしょう。

投稿2021/07/15 06:14

k_a

総合スコア983

yukiman

2021/07/15 06:49

ka4さんありがとうございます！ ``` <template> <div id="app"> <body> <h1>ToDoリスト</h1> <label ><input type="radio" name="list" value="all" v-model="filter" />すべて</label > <label ><input type="radio" name="list" value="active" v-model="filter" />作業中</label > <label ><input type="radio" name="list" value="completed" v-model="filter" />完了</label > <table> <tr v-for="(todo, key) in filteredTodos" :key="key"> <td>{{ todo.id }}</td> <td>{{ todo.title }}</td> <td> <button @click="statusChange(todo.id)"> <span>{{ todo.statusBtn }}</span> </button> </td> <td> <button @click="deleteTask(todo.id)">{{ todo.delBtn }}</button> </td> </tr> </table> <h2>新規タスクの追加</h2> <form @submit.prevent="addTask"> <input type="text" v-model="newTask" /> <input type="submit" value="追加" class="button" /> </form> </body> </div> </template> <script> export default { data() { return { id: 0, statusBtn: "", newTask: "", todos: [], filter: "all", }; }, computed: { filteredTodos() { if (this.filter === "all") { return this.todos; } else if (this.filter === "completed") { return this.todos.filter((todo) => { return todo.statusBtn === "完了"; }); } else if (this.filter === "active") { return this.todos.filter((todo) => { return todo.statusBtn === "作業中"; }) } else{ return this.todo.statusBtn === ""; } }, }, methods: { addTask: function () { let item = { id: this.id++, title: this.newTask, statusBtn: "作業中", delBtn: "削除", }; this.todos.push(item); this.newTask = ""; }, statusChange: function (id) { for (let todo of this.todos) { if (todo.id === id) { if (todo.statusBtn === "作業中") { todo.statusBtn = "完了"; } else { todo.statusBtn = "作業中"; } break; } } }, deleteTask: function (index) { this.todos.splice(index, 1); }, }, }; </script> ``` で書き直し削除時の機動と、エラーについては解決したのですが、追加時のIDが次の数字から割り当てられてしまうところに対しての、 ”削除処理を行ったときには何も操作していないので当たり前だと思います。” ここでの、コードの書き換えをどのように書いたらうまく実行できるでしょうか、、、お手数をおかけして申し訳ありません。

k_a

2021/07/15 07:13

そこについてはyukimanさんがどういう動作をしたいのかによります。ただ、`id`を別変数で管理するんじゃなくて、`todos`内のにすでに存在するidを見て新規idを割り振るのがいいんじゃないでしょうか。今の状態が ` todos = [ {id : 0}, {id : 1} , {id : 4} ] ` だったら新規のtodoのidは2にするなど。

yukiman

2021/07/16 01:24

k4aさんありがとうございます。 id: this.id++, のコードのよって削除された動作を無視して、削除されたIDを含めて、番号が振り当てられてしまいます。追加のときだけ、indexで振り当てるには、どのように書き足せばうまくいくでしょうか、、何度もすみません！

k_a

2021/07/16 02:01

いや、なので先にコメントしたとおり、`id`を別変数で管理していて追加処理でインクリメントしてるのみなので削除された動作を無視するのは当たり前です。 >追加のときだけ、indexで振り当てるには、この文章の意図が不明瞭です。

yukiman

2021/07/17 04:22

なるほどです！すみません、ありがとうございます。

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