teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録
トップVue.jsに関する質問Vue.jsでTodoアプリ作成。完了のラジオボタンを選択中に新規タスクを追加しても作業中のタスクが表示されないようにしたい。

編集履歴

回答編集履歴

7

不要なループを修正しました。

2021/01/16 04:47

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -120,7 +120,7 @@
120
120
 
121
121
  changeState(id) {
122
122
 
123
- const todo = this.todos.find((i) => i.id === id); // 修正箇所： idでタスクを検索し、状態を変更
123
+ const todo = this.todos[id]; // 修正箇所： idの検索
124
124
 
125
125
  if (todo.state === "作業中") {
126
126
 

6

削除時にIDを振り直すよう修正しました

2021/01/16 04:47

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -86,17 +86,9 @@
86
86
 
87
87
  if (this.newTask.match(/\S/g)) {
88
88
 
89
- // 修正箇所：タスク追加時にidを付与
90
-
91
- const oldId = this.todos.length
92
-
93
- ? this.todos[this.todos.length - 1].id
94
-
95
- : 0;
96
-
97
89
  this.todos.push({
98
90
 
99
- id: oldId + 1, // 修正箇所：タスク追加時にidを付与
91
+ id: this.todos.length, // 修正箇所：タスク追加時にidを付与
100
92
 
101
93
  task: this.newTask,
102
94
 
@@ -112,11 +104,15 @@
112
104
 
113
105
  deleteTask(id) {
114
106
 
115
- const index = this.todos.findIndex((i) => i.id === id); // 修正箇所： 削除対象idの配列位置を検索
107
+ if (id > -1) {
116
108
 
117
- if (index > -1) { // 修正箇所 id→indexに変更
109
+ this.todos.splice(id, 1);
118
110
 
119
- this.todos.splice(index, 1); // 修正箇所 id→indexに変更
111
+ this.todos.forEach((todo, index) => { // 修正箇所： idの振り直し
112
+
113
+ todo.id = index;
114
+
115
+ });
120
116
 
121
117
  }
122
118
 

5

等符号の追加

2021/01/16 04:35

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -112,7 +112,7 @@
112
112
 
113
113
  deleteTask(id) {
114
114
 
115
- const index = this.todos.findIndex((i) => i.id == id); // 修正箇所： 削除対象idの配列位置を検索
115
+ const index = this.todos.findIndex((i) => i.id === id); // 修正箇所： 削除対象idの配列位置を検索
116
116
 
117
117
  if (index > -1) { // 修正箇所 id→indexに変更
118
118
 

4

id→indexに変更

2021/01/14 06:33

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -114,7 +114,7 @@
114
114
 
115
115
  const index = this.todos.findIndex((i) => i.id == id); // 修正箇所： 削除対象idの配列位置を検索
116
116
 
117
- if (id > -1) {
117
+ if (index > -1) { // 修正箇所 id→indexに変更
118
118
 
119
119
  this.todos.splice(index, 1); // 修正箇所 id→indexに変更
120
120
 

3

タスクの削除処理を修正しました。

2021/01/14 06:30

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  <tbody id="todoList">
10
10
 
11
- <tr v-for="(todo, index) in viewTodos" :key="index"> // totos → viewTodos に変更
11
+ <tr v-for="(todo, index) in viewTodos" :key="index"> // todos → viewTodos に変更
12
12
 
13
13
  <td>{{ todo.id}}</td> // 修正箇所:index→todo.idに変更
14
14
 
@@ -112,9 +112,11 @@
112
112
 
113
113
  deleteTask(id) {
114
114
 
115
+ const index = this.todos.findIndex((i) => i.id == id); // 修正箇所： 削除対象idの配列位置を検索
116
+
115
117
  if (id > -1) {
116
118
 
117
- this.todos.splice(id, 1);
119
+ this.todos.splice(index, 1); // 修正箇所 id→indexに変更
118
120
 
119
121
  }
120
122
 

2

修正箇所にコメントを追加しました。

2021/01/14 06:27

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  <tr v-for="(todo, index) in viewTodos" :key="index"> // totos → viewTodos に変更
12
12
 
13
- <td>{{ todo.id}}</td>
13
+ <td>{{ todo.id}}</td> // 修正箇所:index→todo.idに変更
14
14
 
15
15
  <td>{{ todo.task }}</td>
16
16
 
@@ -20,7 +20,7 @@
20
20
 
21
21
  class="state-management-button"
22
22
 
23
- @click="changeState(todo.id)"
23
+ @click="changeState(todo.id)" // 修正箇所:index→todo.idに変更
24
24
 
25
25
  >
26
26
 
@@ -32,7 +32,7 @@
32
32
 
33
33
  <td>
34
34
 
35
- <button @click="deleteTask(todo.id)">削除</button>
35
+ <button @click="deleteTask(todo.id)">削除</button> // 修正箇所:index→todo.idに変更
36
36
 
37
37
  </td>
38
38
 
@@ -64,9 +64,7 @@
64
64
 
65
65
  },
66
66
 
67
- computed: {
68
-
69
- // 算出プロパティを追加
67
+ computed: { // 算出プロパティを追加
70
68
 
71
69
  viewTodos() {
72
70
 
@@ -88,6 +86,8 @@
88
86
 
89
87
  if (this.newTask.match(/\S/g)) {
90
88
 
89
+ // 修正箇所：タスク追加時にidを付与
90
+
91
91
  const oldId = this.todos.length
92
92
 
93
93
  ? this.todos[this.todos.length - 1].id
@@ -96,7 +96,7 @@
96
96
 
97
97
  this.todos.push({
98
98
 
99
- id: oldId + 1,
99
+ id: oldId + 1, // 修正箇所：タスク追加時にidを付与
100
100
 
101
101
  task: this.newTask,
102
102
 
@@ -122,7 +122,7 @@
122
122
 
123
123
  changeState(id) {
124
124
 
125
- const todo = this.todos.find((i) => i.id === id);
125
+ const todo = this.todos.find((i) => i.id === id); // 修正箇所： idでタスクを検索し、状態を変更
126
126
 
127
127
  if (todo.state === "作業中") {
128
128
 
@@ -136,25 +136,19 @@
136
136
 
137
137
  },
138
138
 
139
- workingTodo() {
139
+ workingTodo() { // 変更
140
-
141
- // 変更
142
140
 
143
141
  this.displayState = "作業中";
144
142
 
145
143
  },
146
144
 
147
- doneTodo() {
148
-
149
- // 変更
145
+ doneTodo() { // 変更
150
146
 
151
147
  this.displayState = "完了";
152
148
 
153
149
  },
154
150
 
155
- allTodo() {
156
-
157
- // 変更
151
+ allTodo() { // 変更
158
152
 
159
153
  this.displayState = "";
160
154
 

1

作業中/完了ボタン押下時に変更したいTODOとは別のTODOの状態が変更されるため変更

2021/01/14 06:09

投稿

Twoshi
Twoshi

スコア354

test CHANGED
@@ -6,13 +6,39 @@
6
6
 
7
7
  ```HTML
8
8
 
9
- <tr
9
+ <tbody id="todoList">
10
10
 
11
- v-for="(todo, index) in viewTodos" // totos → viewTodos に変更
11
+ <tr v-for="(todo, index) in viewTodos" :key="index"> // totos → viewTodos に変更
12
12
 
13
- :key="index" // todo.stateの場合keyが重複してしまいコンソールエラーとなるため、indexに変更
13
+ <td>{{ todo.id}}</td>
14
14
 
15
+ <td>{{ todo.task }}</td>
16
+
17
+ <td>
18
+
19
+ <button
20
+
21
+ class="state-management-button"
22
+
23
+ @click="changeState(todo.id)"
24
+
15
- >
25
+ >
26
+
27
+ {{ todo.state }}
28
+
29
+ </button>
30
+
31
+ </td>
32
+
33
+ <td>
34
+
35
+ <button @click="deleteTask(todo.id)">削除</button>
36
+
37
+ </td>
38
+
39
+ </tr>
40
+
41
+ </tbody>
16
42
 
17
43
  ```
18
44
 
@@ -38,7 +64,9 @@
38
64
 
39
65
  },
40
66
 
67
+ computed: {
68
+
41
- computed: { // 算出プロパティを追加
69
+ // 算出プロパティを追加
42
70
 
43
71
  viewTodos() {
44
72
 
@@ -60,13 +88,19 @@
60
88
 
61
89
  if (this.newTask.match(/\S/g)) {
62
90
 
91
+ const oldId = this.todos.length
92
+
93
+ ? this.todos[this.todos.length - 1].id
94
+
95
+ : 0;
96
+
63
97
  this.todos.push({
98
+
99
+ id: oldId + 1,
64
100
 
65
101
  task: this.newTask,
66
102
 
67
103
  state: "作業中" // 利用しないため、viewChangeを削除
68
-
69
-
70
104
 
71
105
  });
72
106
 
@@ -88,31 +122,39 @@
88
122
 
89
123
  changeState(id) {
90
124
 
91
- if (this.todos[id].state === "作業中") {
125
+ const todo = this.todos.find((i) => i.id === id);
92
126
 
93
- this.todos[id].state = "完了";
127
+ if (todo.state === "作業中") {
94
128
 
95
- } else if (this.todos[id].state === "完了") {
129
+ todo.state = "完了";
96
130
 
131
+ } else if (todo.state === "完了") {
132
+
97
- this.todos[id].state = "作業中";
133
+ todo.state = "作業中";
98
134
 
99
135
  }
100
136
 
101
137
  },
102
138
 
103
- workingTodo(e) { // 変更
139
+ workingTodo() {
140
+
141
+ // 変更
104
142
 
105
143
  this.displayState = "作業中";
106
144
 
107
145
  },
108
146
 
147
+ doneTodo() {
148
+
109
- doneTodo(e) { // 変更
149
+ // 変更
110
150
 
111
151
  this.displayState = "完了";
112
152
 
113
153
  },
114
154
 
155
+ allTodo() {
156
+
115
- allTodo(e) { // 変更
157
+ // 変更
116
158
 
117
159
  this.displayState = "";
118
160
 
@@ -120,7 +162,7 @@
120
162
 
121
163
  }
122
164
 
123
- };
165
+ });
124
166
 
125
167
  </script>
126
168