質問編集履歴
2
使用コードを修正。
test
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
todoリスト
|
|
1
|
+
[todoリスト]投稿済みのテキストを編集後に送信するとエラーが出る
|
test
CHANGED
|
@@ -2,6 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
todoリストを作成しています。編集機能の実装が思うようにいかないので知恵を貸して頂きたいです。
|
|
4
4
|
|
|
5
|
+
具体的には編集が完了した後に保存ボタンを押すとエラーが出てしまいます。
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
5
9
|
|
|
6
10
|
|
|
7
11
|
**[実装したい内容]**
|
|
@@ -14,9 +18,9 @@
|
|
|
14
18
|
|
|
15
19
|
|
|
16
20
|
|
|
17
|
-
②クリックすると、「リストを追加しています」の記載が、todo入力箇所に表示される
|
|
21
|
+
②クリックすると、「リストを追加しています」の記載が、todo入力箇所に表示される
|
|
18
|
-
|
|
22
|
+
|
|
19
|
-
③保存をクリックすると変更が元のtodoの場所に表示される
|
|
23
|
+
③保存をクリックすると変更が元のtodoの場所に表示される ←ここが反映されずエラーが出てしまう
|
|
20
24
|
|
|
21
25
|
|
|
22
26
|
|
|
@@ -24,11 +28,11 @@
|
|
|
24
28
|
|
|
25
29
|
### 発生している問題・エラーメッセージ
|
|
26
30
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
31
|
+
```
|
|
30
|
-
|
|
32
|
+
|
|
31
|
-
|
|
33
|
+
Cannot read property 'text' of undefined
|
|
34
|
+
|
|
35
|
+
```
|
|
32
36
|
|
|
33
37
|
|
|
34
38
|
|
|
@@ -40,31 +44,7 @@
|
|
|
40
44
|
|
|
41
45
|
```template
|
|
42
46
|
|
|
43
|
-
<v-row v-for="(todo,index) in todos" :key="index">
|
|
44
|
-
|
|
45
|
-
<v-text-field
|
|
46
|
-
|
|
47
|
-
filled
|
|
48
|
-
|
|
49
|
-
readonly
|
|
50
|
-
|
|
51
|
-
:value="todo.text"
|
|
52
|
-
|
|
53
|
-
class="ma-3"
|
|
54
|
-
|
|
55
|
-
auto-grow
|
|
56
|
-
|
|
57
|
-
/>
|
|
58
|
-
|
|
59
|
-
<v-menu
|
|
60
|
-
|
|
61
|
-
top
|
|
62
|
-
|
|
63
|
-
rounded
|
|
64
|
-
|
|
65
|
-
>
|
|
66
|
-
|
|
67
|
-
<template #activator="{ on, attrs }">
|
|
47
|
+
<template #activator="{ on, attrs }">
|
|
68
48
|
|
|
69
49
|
<v-btn
|
|
70
50
|
|
|
@@ -96,67 +76,31 @@
|
|
|
96
76
|
|
|
97
77
|
>
|
|
98
78
|
|
|
99
|
-
|
|
79
|
+
<v-list-item-title @click="toEdit(todo)">
|
|
80
|
+
|
|
100
|
-
|
|
81
|
+
<v-icon>mdi-pencil</v-icon>
|
|
82
|
+
|
|
83
|
+
編集
|
|
84
|
+
|
|
85
|
+
</v-list-item-title>
|
|
86
|
+
|
|
87
|
+
</v-list-item>
|
|
88
|
+
|
|
89
|
+
</v-list>
|
|
90
|
+
|
|
91
|
+
<v-list>
|
|
92
|
+
|
|
101
|
-
<v-t
|
|
93
|
+
<v-list-item
|
|
102
|
-
|
|
94
|
+
|
|
103
|
-
|
|
95
|
+
link
|
|
104
|
-
|
|
105
|
-
readonly
|
|
106
|
-
|
|
107
|
-
:value="todo.text"
|
|
108
|
-
|
|
109
|
-
class="ma-3"
|
|
110
|
-
|
|
111
|
-
auto-grow
|
|
112
|
-
|
|
113
|
-
/>
|
|
114
|
-
|
|
115
|
-
<v-menu
|
|
116
|
-
|
|
117
|
-
top
|
|
118
|
-
|
|
119
|
-
rounded
|
|
120
|
-
|
|
121
|
-
>
|
|
122
|
-
|
|
123
|
-
<template #activator="{ on, attrs }">
|
|
124
|
-
|
|
125
|
-
<v-btn
|
|
126
|
-
|
|
127
|
-
v-bind="attrs"
|
|
128
|
-
|
|
129
|
-
icon
|
|
130
|
-
|
|
131
|
-
class="mt-6"
|
|
132
|
-
|
|
133
|
-
v-on="on"
|
|
134
96
|
|
|
135
97
|
>
|
|
136
98
|
|
|
137
|
-
<v-icon>
|
|
138
|
-
|
|
139
|
-
mdi-dots-vertical
|
|
140
|
-
|
|
141
|
-
</v-icon>
|
|
142
|
-
|
|
143
|
-
</v-btn>
|
|
144
|
-
|
|
145
|
-
</template>
|
|
146
|
-
|
|
147
|
-
<v-list>
|
|
148
|
-
|
|
149
|
-
<v-list-item
|
|
150
|
-
|
|
151
|
-
link
|
|
152
|
-
|
|
153
|
-
>
|
|
154
|
-
|
|
155
|
-
<v-list-item-title @click="
|
|
99
|
+
<v-list-item-title @click="removeTodo(todo)">
|
|
156
|
-
|
|
100
|
+
|
|
157
|
-
<v-icon>mdi-
|
|
101
|
+
<v-icon>mdi-delete</v-icon>
|
|
158
|
-
|
|
102
|
+
|
|
159
|
-
|
|
103
|
+
削除
|
|
160
104
|
|
|
161
105
|
</v-list-item-title>
|
|
162
106
|
|
|
@@ -164,26 +108,6 @@
|
|
|
164
108
|
|
|
165
109
|
</v-list>
|
|
166
110
|
|
|
167
|
-
<v-list>
|
|
168
|
-
|
|
169
|
-
<v-list-item
|
|
170
|
-
|
|
171
|
-
link
|
|
172
|
-
|
|
173
|
-
>
|
|
174
|
-
|
|
175
|
-
<v-list-item-title @click="removeTodo(todo)">
|
|
176
|
-
|
|
177
|
-
<v-icon>mdi-delete</v-icon>
|
|
178
|
-
|
|
179
|
-
削除
|
|
180
|
-
|
|
181
|
-
</v-list-item-title>
|
|
182
|
-
|
|
183
|
-
</v-list-item>
|
|
184
|
-
|
|
185
|
-
</v-list>
|
|
186
|
-
|
|
187
111
|
</v-menu>
|
|
188
112
|
|
|
189
113
|
</v-row>
|
|
@@ -200,8 +124,6 @@
|
|
|
200
124
|
|
|
201
125
|
auto-grow
|
|
202
126
|
|
|
203
|
-
@keyup.enter="addTodo"
|
|
204
|
-
|
|
205
127
|
/>
|
|
206
128
|
|
|
207
129
|
<v-btn
|
|
@@ -218,32 +140,6 @@
|
|
|
218
140
|
|
|
219
141
|
|
|
220
142
|
|
|
221
|
-
<div class="text-center">
|
|
222
|
-
|
|
223
|
-
<v-btn
|
|
224
|
-
|
|
225
|
-
small
|
|
226
|
-
|
|
227
|
-
color="primary"
|
|
228
|
-
|
|
229
|
-
outlined
|
|
230
|
-
|
|
231
|
-
@click="hidden=!hidden"
|
|
232
|
-
|
|
233
|
-
>
|
|
234
|
-
|
|
235
|
-
<v-icon dark>
|
|
236
|
-
|
|
237
|
-
mdi-minus
|
|
238
|
-
|
|
239
|
-
</v-icon>
|
|
240
|
-
|
|
241
|
-
</v-btn>
|
|
242
|
-
|
|
243
|
-
</div>
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
143
|
```
|
|
248
144
|
|
|
249
145
|
|
|
@@ -256,17 +152,11 @@
|
|
|
256
152
|
|
|
257
153
|
return {
|
|
258
154
|
|
|
259
|
-
//編集フラグ
|
|
260
|
-
|
|
261
|
-
editIndex: false,
|
|
155
|
+
editIndex: false, //編集状態の時はtrueになる
|
|
262
|
-
|
|
263
|
-
hidden: false,
|
|
264
|
-
|
|
265
|
-
//todo入力箇所
|
|
266
156
|
|
|
267
157
|
itemText: '',
|
|
268
158
|
|
|
269
|
-
//
|
|
159
|
+
selectedTodo: [],//toEditメソッドを実行すると選択されたtodo情報が配列に入れられる
|
|
270
160
|
|
|
271
161
|
items: [
|
|
272
162
|
|
|
@@ -284,7 +174,7 @@
|
|
|
284
174
|
|
|
285
175
|
computed: {
|
|
286
176
|
|
|
287
|
-
//todo
|
|
177
|
+
//todoリストをstoreから呼び出す
|
|
288
178
|
|
|
289
179
|
todos () {
|
|
290
180
|
|
|
@@ -292,7 +182,7 @@
|
|
|
292
182
|
|
|
293
183
|
},
|
|
294
184
|
|
|
295
|
-
|
|
185
|
+
|
|
296
186
|
|
|
297
187
|
disabled () {
|
|
298
188
|
|
|
@@ -306,11 +196,9 @@
|
|
|
306
196
|
|
|
307
197
|
methods: {
|
|
308
198
|
|
|
309
|
-
//送信ボタン
|
|
310
|
-
|
|
311
|
-
//
|
|
199
|
+
//新規todoリスト追加。editIndexがtrueの場合はtodos/editで編集を反映させる
|
|
312
|
-
|
|
200
|
+
|
|
313
|
-
addTodo (
|
|
201
|
+
addTodo () {
|
|
314
202
|
|
|
315
203
|
if (this.editIndex === false) {
|
|
316
204
|
|
|
@@ -320,25 +208,33 @@
|
|
|
320
208
|
|
|
321
209
|
} else {
|
|
322
210
|
|
|
211
|
+
// this.selectedTodo・・・編集対象のリストを取得
|
|
212
|
+
|
|
213
|
+
// this.itemText・・・編集テキストを反映させる
|
|
214
|
+
|
|
323
|
-
this.$store.commit('todos/edit', this.itemText
|
|
215
|
+
this.$store.commit('todos/edit', this.selectedTodo, this.itemText)
|
|
324
216
|
|
|
325
217
|
this.itemText = ''
|
|
326
218
|
|
|
219
|
+
this.editIndex = false
|
|
220
|
+
|
|
327
221
|
}
|
|
328
222
|
|
|
329
223
|
},
|
|
330
224
|
|
|
331
|
-
//編集
|
|
225
|
+
//編集
|
|
332
226
|
|
|
333
227
|
toEdit (todo) {
|
|
334
228
|
|
|
335
|
-
this.editIndex = true
|
|
229
|
+
this.editIndex = true //todo追加ボタンをクリックした時の処理を分ける
|
|
230
|
+
|
|
336
|
-
|
|
231
|
+
this.selectedTodo = this.todo //選択されたリストをselectedTodoで管理
|
|
232
|
+
|
|
337
|
-
this.itemText = t
|
|
233
|
+
this.itemText = todo.text // 編集対象を入力欄に入れる
|
|
338
234
|
|
|
339
235
|
},
|
|
340
236
|
|
|
341
|
-
//
|
|
237
|
+
//削除
|
|
342
238
|
|
|
343
239
|
removeTodo (todo) {
|
|
344
240
|
|
|
@@ -352,6 +248,8 @@
|
|
|
352
248
|
|
|
353
249
|
</script>
|
|
354
250
|
|
|
251
|
+
|
|
252
|
+
|
|
355
253
|
```
|
|
356
254
|
|
|
357
255
|
|
|
@@ -370,7 +268,15 @@
|
|
|
370
268
|
|
|
371
269
|
export const mutations = {
|
|
372
270
|
|
|
271
|
+
export const state = () => ({
|
|
272
|
+
|
|
273
|
+
list: []
|
|
274
|
+
|
|
275
|
+
})
|
|
276
|
+
|
|
277
|
+
|
|
278
|
+
|
|
373
|
-
|
|
279
|
+
export const mutations = {
|
|
374
280
|
|
|
375
281
|
add (state, text) {
|
|
376
282
|
|
|
@@ -382,17 +288,19 @@
|
|
|
382
288
|
|
|
383
289
|
},
|
|
384
290
|
|
|
385
|
-
//todo削除
|
|
386
|
-
|
|
387
291
|
remove (state, todo) {
|
|
388
292
|
|
|
389
293
|
state.list.splice(state.list.indexOf(todo), 1)
|
|
390
294
|
|
|
391
295
|
},
|
|
392
296
|
|
|
297
|
+
|
|
298
|
+
|
|
393
|
-
//todo編集
|
|
299
|
+
// 引数todo・・・編集対象を取得
|
|
300
|
+
|
|
394
|
-
|
|
301
|
+
/ /引数tex・・・変更したテキストを
|
|
302
|
+
|
|
395
|
-
edit (state, text
|
|
303
|
+
edit (state, todo, text) {
|
|
396
304
|
|
|
397
305
|
state.list.splice(state.list.indexOf(todo), 1, text)
|
|
398
306
|
|
|
@@ -400,25 +308,25 @@
|
|
|
400
308
|
|
|
401
309
|
}
|
|
402
310
|
|
|
311
|
+
|
|
312
|
+
|
|
403
313
|
```
|
|
404
314
|
|
|
405
315
|
### 試したこと
|
|
406
316
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
```
|
|
317
|
+
```
|
|
410
|
-
|
|
411
|
-
|
|
318
|
+
|
|
412
|
-
|
|
413
|
-
toEdit (todo) {
|
|
414
|
-
|
|
415
|
-
・・・
|
|
416
|
-
|
|
417
|
-
this.itemText = this.todos.text
|
|
418
|
-
|
|
419
|
-
},
|
|
420
|
-
|
|
421
|
-
|
|
319
|
+
Cannot read property 'text' of undefined
|
|
320
|
+
|
|
321
|
+
```
|
|
322
|
+
|
|
323
|
+
上記のエラーでstore/editで編集箇所をstore/editが取得できていないのではないかと思い、選択した値をselectedTodoに格納してからstoreに送るようにしましたがエラーは変わりませんでした。
|
|
324
|
+
|
|
325
|
+
``` edit (state, todo, text) {
|
|
326
|
+
|
|
327
|
+
state.list.splice(state.list.indexOf(todo), 1, text)
|
|
328
|
+
|
|
329
|
+
}
|
|
422
330
|
|
|
423
331
|
```
|
|
424
332
|
|
1
誤字を修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -408,6 +408,8 @@
|
|
|
408
408
|
|
|
409
409
|
```
|
|
410
410
|
|
|
411
|
+
//todos.textで値を取得しようと試みる
|
|
412
|
+
|
|
411
413
|
toEdit (todo) {
|
|
412
414
|
|
|
413
415
|
・・・
|
|
@@ -416,10 +418,10 @@
|
|
|
416
418
|
|
|
417
419
|
},
|
|
418
420
|
|
|
421
|
+
//Cannot read property 'length' of undefined
|
|
422
|
+
|
|
419
423
|
```
|
|
420
424
|
|
|
421
|
-
としてみましたが、今度はlength のエラーが発生してしまいました。
|
|
422
|
-
|
|
423
425
|
### 補足情報（FW/ツールのバージョンなど）
|
|
424
426
|
|
|
425
427
|
・Nuxt2.15
|