質問編集履歴
6
微修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -128,20 +128,12 @@
|
|
|
128
128
|
},
|
|
129
129
|
methods: {
|
|
130
130
|
openModal(id) {
|
|
131
|
+
Object.keys(this.isShow).forEach(key => {
|
|
131
|
-
|
|
132
|
+
if (key === id) {
|
|
132
|
-
case "id01":
|
|
133
|
-
this.isShow.id01 = !this.isShow.id01;
|
|
134
|
-
this.isAgreed
|
|
133
|
+
this.isAgreed[key] = true;
|
|
135
|
-
break;
|
|
136
|
-
case "id02":
|
|
137
|
-
this.isShow
|
|
134
|
+
this.isShow[key] = !this.isShow[key];
|
|
138
|
-
this.isAgreed.id02 = true;
|
|
139
|
-
break;
|
|
140
|
-
case "id03":
|
|
141
|
-
this.isShow.id03 = !this.isShow.id03;
|
|
142
|
-
this.isAgreed.id03 = true;
|
|
143
|
-
break;
|
|
144
|
-
|
|
135
|
+
}
|
|
136
|
+
});
|
|
145
137
|
},
|
|
146
138
|
closeModal() {
|
|
147
139
|
Object.keys(this.isShow).forEach(key => {
|
5
微修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -34,6 +34,9 @@
|
|
|
34
34
|
**親コンポーネント**
|
|
35
35
|
以下コードで、特に繰り返しになってしまっている記述についてどうにか省略できないか考えております。
|
|
36
36
|
現在はjsonから取得するidを3つに設定しているため、少しすっきりして見えますが、idを10個など取得すると、かなり可読性の悪いコードになってしまっています。
|
|
37
|
+
|
|
38
|
+
**追記**
|
|
39
|
+
だんだん短くなってきました...!
|
|
37
40
|
```vue
|
|
38
41
|
<template>
|
|
39
42
|
<section class="container">
|
4
微修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -56,18 +56,10 @@
|
|
|
56
56
|
<p v-if="id == 'id02'">カード2</p>
|
|
57
57
|
<p v-if="id == 'id03'">カード3</p>
|
|
58
58
|
|
|
59
|
-
<div v-if="id ==
|
|
59
|
+
<div v-if="id == id">
|
|
60
|
-
<p v-if="!isAgreed
|
|
60
|
+
<p v-if="!isAgreed[id]">Not agree</p>
|
|
61
|
-
<p v-if="isAgreed
|
|
61
|
+
<p v-if="isAgreed[id]" class="isAgreed">Agreed</p>
|
|
62
62
|
</div>
|
|
63
|
-
<div v-if="id == 'id02'">
|
|
64
|
-
<p v-if="!isAgreed.id02">Not agree</p>
|
|
65
|
-
<p v-if="isAgreed.id02" class="isAgreed">Agreed</p>
|
|
66
|
-
</div>
|
|
67
|
-
<div v-if="id == 'id03'">
|
|
68
|
-
<p v-if="!isAgreed.id03">Not agree</p>
|
|
69
|
-
<p v-if="isAgreed.id03" class="isAgreed">Agreed</p>
|
|
70
|
-
</div>
|
|
71
63
|
|
|
72
64
|
</li>
|
|
73
65
|
</ul>
|
3
微修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -149,9 +149,9 @@
|
|
|
149
149
|
}
|
|
150
150
|
},
|
|
151
151
|
closeModal() {
|
|
152
|
+
Object.keys(this.isShow).forEach(key => {
|
|
152
|
-
|
|
153
|
+
if (this.isShow[key] === true) this.isShow[key] = false;
|
|
153
|
-
|
|
154
|
+
});
|
|
154
|
-
this.isShow.id03 = false;
|
|
155
155
|
}
|
|
156
156
|
}
|
|
157
157
|
};
|
2
追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -32,6 +32,8 @@
|
|
|
32
32
|
各コード、style等不要と思われる部分は消しています。
|
|
33
33
|
|
|
34
34
|
**親コンポーネント**
|
|
35
|
+
以下コードで、特に繰り返しになってしまっている記述についてどうにか省略できないか考えております。
|
|
36
|
+
現在はjsonから取得するidを3つに設定しているため、少しすっきりして見えますが、idを10個など取得すると、かなり可読性の悪いコードになってしまっています。
|
|
35
37
|
```vue
|
|
36
38
|
<template>
|
|
37
39
|
<section class="container">
|
1
微修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
- 各カード(li要素)、コンポーネントにはjsonからIDを取得し、そのIDに応じた要素を表示させる。
|
|
14
14
|
- IDの数は増減する可能性がある。
|
|
15
15
|
|
|
16
|
-
**
|
|
16
|
+
**期待している挙動**
|
|
17
17
|
- 各カードをクリックすると、対応したコンポーネント（モーダル）を表示。
|
|
18
18
|
- コンポーネントのボタンをクリックすると、コンポーネントを閉じる（非表示）
|
|
19
19
|
- コンポーネントのAgreeボタンをクリックすると対応するカードの状態をtrueに変更（それに伴うスタイルの付与）
|