質問編集履歴

6

微修正

2019/02/19 08:37

投稿

aa316316
aa316316

スコア39

test CHANGED
File without changes
test CHANGED
@@ -258,33 +258,17 @@
258
258
 
259
259
  openModal(id) {
260
260
 
261
+ Object.keys(this.isShow).forEach(key => {
262
+
261
- switch (id) {
263
+ if (key === id) {
262
-
263
- case "id01":
264
+
264
-
265
- this.isShow.id01 = !this.isShow.id01;
266
-
267
- this.isAgreed.id01 = true;
265
+ this.isAgreed[key] = true;
268
-
269
- break;
266
+
270
-
271
- case "id02":
272
-
273
- this.isShow.id02 = !this.isShow.id02;
267
+ this.isShow[key] = !this.isShow[key];
274
-
275
- this.isAgreed.id02 = true;
268
+
276
-
277
- break;
278
-
279
- case "id03":
280
-
281
- this.isShow.id03 = !this.isShow.id03;
282
-
283
- this.isAgreed.id03 = true;
284
-
285
- break;
286
-
287
- }
269
+ }
270
+
271
+ });
288
272
 
289
273
  },
290
274
 

5

微修正

2019/02/19 08:37

投稿

aa316316
aa316316

スコア39

test CHANGED
File without changes
test CHANGED
@@ -70,6 +70,12 @@
70
70
 
71
71
  現在はjsonから取得するidを3つに設定しているため、少しすっきりして見えますが、idを10個など取得すると、かなり可読性の悪いコードになってしまっています。
72
72
 
73
+
74
+
75
+ **追記**
76
+
77
+ だんだん短くなってきました...!
78
+
73
79
  ```vue
74
80
 
75
81
  <template>

4

微修正

2019/02/19 08:28

投稿

aa316316
aa316316

スコア39

test CHANGED
File without changes
test CHANGED
@@ -114,30 +114,14 @@
114
114
 
115
115
 
116
116
 
117
- <div v-if="id == 'id01'">
117
+ <div v-if="id == id">
118
-
118
+
119
- <p v-if="!isAgreed.id01">Not agree</p>
119
+ <p v-if="!isAgreed[id]">Not agree</p>
120
-
120
+
121
- <p v-if="isAgreed.id01" class="isAgreed">Agreed</p>
121
+ <p v-if="isAgreed[id]" class="isAgreed">Agreed</p>
122
122
 
123
123
  </div>
124
124
 
125
- <div v-if="id == 'id02'">
126
-
127
- <p v-if="!isAgreed.id02">Not agree</p>
128
-
129
- <p v-if="isAgreed.id02" class="isAgreed">Agreed</p>
130
-
131
- </div>
132
-
133
- <div v-if="id == 'id03'">
134
-
135
- <p v-if="!isAgreed.id03">Not agree</p>
136
-
137
- <p v-if="isAgreed.id03" class="isAgreed">Agreed</p>
138
-
139
- </div>
140
-
141
125
 
142
126
 
143
127
  </li>

3

微修正

2019/02/19 08:28

投稿

aa316316
aa316316

スコア39

test CHANGED
File without changes
test CHANGED
@@ -300,11 +300,11 @@
300
300
 
301
301
  closeModal() {
302
302
 
303
+ Object.keys(this.isShow).forEach(key => {
304
+
303
- this.isShow.id01 = false;
305
+ if (this.isShow[key] === true) this.isShow[key] = false;
304
-
306
+
305
- this.isShow.id02 = false;
307
+ });
306
-
307
- this.isShow.id03 = false;
308
308
 
309
309
  }
310
310
 

2

追加

2019/02/19 08:04

投稿

aa316316
aa316316

スコア39

test CHANGED
File without changes
test CHANGED
@@ -66,6 +66,10 @@
66
66
 
67
67
  **親コンポーネント**
68
68
 
69
+ 以下コードで、特に繰り返しになってしまっている記述についてどうにか省略できないか考えております。
70
+
71
+ 現在はjsonから取得するidを3つに設定しているため、少しすっきりして見えますが、idを10個など取得すると、かなり可読性の悪いコードになってしまっています。
72
+
69
73
  ```vue
70
74
 
71
75
  <template>

1

微修正

2019/02/19 07:08

投稿

aa316316
aa316316

スコア39

test CHANGED
File without changes
test CHANGED
@@ -28,7 +28,7 @@
28
28
 
29
29
 
30
30
 
31
- **実現こと**
31
+ **期待る挙動**
32
32
 
33
33
  - 各カードをクリックすると、対応したコンポーネント(モーダル)を表示。
34
34