teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

6

微修正

2019/02/19 08:37

投稿

aa316316
aa316316

スコア39

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
- switch (id) {
132
+ if (key === id) {
132
- case "id01":
133
- this.isShow.id01 = !this.isShow.id01;
134
- this.isAgreed.id01 = true;
133
+ this.isAgreed[key] = true;
135
- break;
136
- case "id02":
137
- this.isShow.id02 = !this.isShow.id02;
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

微修正

2019/02/19 08:37

投稿

aa316316
aa316316

スコア39

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

微修正

2019/02/19 08:28

投稿

aa316316
aa316316

スコア39

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 == 'id01'">
59
+ <div v-if="id == id">
60
- <p v-if="!isAgreed.id01">Not agree</p>
60
+ <p v-if="!isAgreed[id]">Not agree</p>
61
- <p v-if="isAgreed.id01" class="isAgreed">Agreed</p>
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

微修正

2019/02/19 08:28

投稿

aa316316
aa316316

スコア39

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
- this.isShow.id01 = false;
153
+ if (this.isShow[key] === true) this.isShow[key] = false;
153
- this.isShow.id02 = false;
154
+ });
154
- this.isShow.id03 = false;
155
155
  }
156
156
  }
157
157
  };

2

追加

2019/02/19 08:04

投稿

aa316316
aa316316

スコア39

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

微修正

2019/02/19 07:08

投稿

aa316316
aa316316

スコア39

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に変更(それに伴うスタイルの付与)