teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問vue-cliにて、v-forでレンダリングしたアコーディオンを一つ開こうとすると全てが開いてしまう

編集履歴

質問編集履歴

9

2019/07/03 18:20

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -172,6 +172,8 @@
172
172
 
173
173
  height: 30px;
174
174
 
175
+ margin-bottom: 10px;
176
+
175
177
  text-align: center;
176
178
 
177
179
  color: white;

8

2019/07/03 18:20

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -166,20 +166,12 @@
166
166
 
167
167
  .accordion {
168
168
 
169
- margin: 10px;
170
-
171
169
  width: 400px;
172
170
 
173
- margin-bottom: 20px;
174
-
175
- border: 10px solid red;
176
-
177
171
  .label {
178
172
 
179
173
  height: 30px;
180
174
 
181
- line-height: 30px;
182
-
183
175
  text-align: center;
184
176
 
185
177
  color: white;
@@ -190,7 +182,7 @@
190
182
 
191
183
  font-weight: bold;
192
184
 
193
- line-height: inherit;
185
+ line-height: 30px;
194
186
 
195
187
  }
196
188
 
@@ -204,8 +196,6 @@
204
196
 
205
197
  .box {
206
198
 
207
- margin-top: 10px;
208
-
209
199
  overflow: hidden;
210
200
 
211
201
  background-color: white;

7

表記を分かりやすく修正

2019/07/03 17:46

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -1,14 +1,20 @@
1
+ ###前提・実現したいこと
2
+
1
3
  いつもお世話になっております。
2
4
 
3
- 現在下記のコードで作ったコンポーネントを別の.vueファイル内で使おうとしているのですが、タイトル通りの現象が起きて困っています。
5
+ 現在下記のコードで作ったコンポーネントを別の.vueファイル内で使おうとしているのですが、タイトル通りの現象が起きてしまい困っています。
6
+
4
-
7
+ [→gifファイル（imgurに飛びます。）](https://i.imgur.com/QdT7Evk.gif)
8
+
5
-
9
+ ###発生している問題・エラーメッセージ
6
-
10
+
11
+
12
+
7
- [コンポーネントについての公式リファレンス](https://jp.vuejs.org/v2/guide/components.html)を読む限り、この現象を防ぐにはdata（この場合はshowの真偽値）を別コンポーネントに関数で管理すれば大丈夫だと理解しています。
13
+ [コンポーネントについての公式リファレンス](https://jp.vuejs.org/v2/guide/components.html)を読む限り、この現象を防ぐにはdata（この場合はshowの真偽値）を別コンポーネントに関数で管理すれば大丈夫だと自分なりに理解しています。
8
14
 
9
15
  しかしこの場合はv-forで同一コンポーネント内でレンダリングしているのでdataを分けられず、結局タイトルに書いた現象がおきてしまいます。
10
16
 
11
- アコーディオンのコンポーネント内ではなく、使用先の.vueファイルでv-forする事も考えましたがそれは出来ませんでした。
17
+ アコーディオンのコンポーネント内ではなく、使用先の.vueファイル内でv-forする事も考えましたがそれは出来ませんでした。
12
18
 
13
19
 
14
20
 
@@ -20,6 +26,10 @@
20
26
 
21
27
  以下がアコーディオンのコードになります。（.vueファイルの中身を分けて記載しています。
22
28
 
29
+
30
+
31
+ ### 該当のソースコード
32
+
23
33
  ```html
24
34
 
25
35
  <div class="accordion" v-for="skill in skills" v-bind:key="skill.id" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">

6

タイトルを分かりやすく変更

2019/07/03 15:12

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
@@ -1 +1 @@
1
- vue-cliにて、v-forでレンダリングしたアコーディオンが１クリックで全て開いてしまう
1
+ vue-cliにて、v-forでレンダリングしたアコーディオンを一つ開こうとすると全てが開いてしまう
test CHANGED
File without changes

5

表記の修正

2019/07/03 14:30

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -190,7 +190,7 @@
190
190
 
191
191
  }
192
192
 
193
- } //.header
193
+ } //.label
194
194
 
195
195
  .box {
196
196
 
@@ -214,7 +214,7 @@
214
214
 
215
215
  }
216
216
 
217
- } //.body
217
+ } //.box
218
218
 
219
219
  } //.accordion
220
220
 

4

記入漏れの修正

2019/07/03 14:26

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -1,173 +1,271 @@
1
1
  いつもお世話になっております。
2
2
 
3
- 現在vue-cliにて、タイトル通りの現象が起きて困っています。
4
-
5
- やりたい事は下記のコードで作ったコンポーネントを↓の画像のように別の.vueファイルで使いたいです。
3
+ 現在下記のコードで作ったコンポーネントを別の.vueファイル内で使おうとしているのですが、タイトル通りの現象が起きて困っています。
4
+
5
+
6
+
6
-
7
+ [コンポーネントについての公式リファレンス](https://jp.vuejs.org/v2/guide/components.html)を読む限り、この現象を防ぐにはdata（この場合はshowの真偽値）を別コンポーネントに関数で管理すれば大丈夫だと理解しています。
8
+
9
+ しかしこの場合はv-forで同一コンポーネント内でレンダリングしているのでdataを分けられず、結局タイトルに書いた現象がおきてしまいます。
10
+
11
+ アコーディオンのコンポーネント内ではなく、使用先の.vueファイルでv-forする事も考えましたがそれは出来ませんでした。
12
+
13
+
14
+
15
+ 色々と試行錯誤したものの解決策が見つからず完全に手詰まりになってしまっています。
16
+
17
+ なにか良い方法はあるのでしょうか、よろしければ何卒お力添えをお願いいたします。
18
+
19
+
20
+
21
+ 以下がアコーディオンのコードになります。（.vueファイルの中身を分けて記載しています。
22
+
7
- ```vue
23
+ ```html
24
+
8
-
25
+ <div class="accordion" v-for="skill in skills" v-bind:key="skill.id" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
26
+
27
+ <div class="label" v-on:click="toggleAccordion" v-bind:style="{ backgroundColor: skill.bgColor }">
28
+
29
+ <h2>{{ skill.name }}<i class="fa fa-angle-down label-icon" v-bind:class="{ rotate : show }"></i></h2>
30
+
9
- <template>
31
+ </div>
10
-
32
+
11
- <section>
33
+ <transition name="slide">
12
-
34
+
13
- <div class="skills-box">
35
+ <div class="box" v-show="show">
14
-
36
+
15
- <AccordionComponent></AccordionComponent>
37
+ <img v-bind:src="require(`../assets/images/${skill.name}.png`)">
16
-
38
+
17
- </div> <!-- skills-box -->
39
+ <p>{{ skill.description }}</p>
18
-
40
+
19
- <router-link to="/" class="move"><i class="fas fa-angle-left"></i> BACK</router-link>
41
+ </div>
20
-
42
+
21
- </section>
43
+ </transition>
22
-
44
+
23
- </template>
45
+ </div>
24
46
 
25
47
  ```
26
48
 
27
-
28
-
29
- [コンポーネントについての公式リファレンス](https://jp.vuejs.org/v2/guide/components.html)を読む限り、この現象を防ぐにはdata（この場合はshowの真偽値）を別コンポーネントに関数で管理すれば大丈夫だと理解しています。
30
-
31
- しかしこの場合はv-forで同一コンポーネント内でレンダリングしているのでdataを分けられず、結局タイトルに書いた現象がおきてしまいます。
32
-
33
- アコーディオンのコンポーネント内ではなく、使用先の.vueファイルでv-forする事も考えましたがそれは出来ませんでした。
34
-
35
-
36
-
37
- 色々と試行錯誤したもの解決策が見つからず完全に手詰まりになってしまっています。
38
-
39
- なにか良い方法はあるのでしょうか、よろしければ何卒お力添えをお願いいたします。
40
-
41
-
42
-
43
- 以下がアコーディオンのコードになります。
44
-
45
- ```html
46
-
47
- <div class="accordion" v-for="skill in skills" v-bind:key="skill.id" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
48
-
49
- <div class="label" v-on:click="toggleAccordion" v-bind:style="{ backgroundColor: skill.bgColor }">
50
-
51
- <h2>{{ skill.name }}<i class="fa fa-angle-down header-icon" v-bind:class="{ rotate : show }"></i></h2>
52
-
53
- </div>
54
-
55
- <transition name="slide">
56
-
57
- <div class="body" v-show="show">
58
-
59
- <img v-bind:src="require(`../assets/images/${skill.name}.png`)">
60
-
61
- <p>{{ skill.description }}</p>
62
-
63
- </div>
64
-
65
- </transition>
66
-
67
- </div>
49
+ ```JavaScript
50
+
51
+ export default {
52
+
53
+ name: 'AccordionComponent',
54
+
55
+ data() {
56
+
57
+ return {
58
+
59
+ skills: [
60
+
61
+ {id: 1, name: 'HTML・CSS', bgColor: 'red',
62
+
63
+ description: `
64
+
65
+ text
66
+
67
+ `
68
+
69
+ },
70
+
71
+ {id: 2, name: 'JavaScript', bgColor: 'gold',
72
+
73
+ description: `
74
+
75
+ text
76
+
77
+ `
78
+
79
+ },
80
+
81
+ {id: 3, name: 'Vue.js', bgColor: 'forestgreen',
82
+
83
+ description: `
84
+
85
+ text
86
+
87
+ `
88
+
89
+ },
90
+
91
+ {id: 4, name: 'Sass', bgColor: 'hotpink',
92
+
93
+ description: `
94
+
95
+ text
96
+
97
+ `
98
+
99
+ },
100
+
101
+ {id: 5, name: 'Firebase', bgColor: 'orange',
102
+
103
+ description: `
104
+
105
+ text
106
+
107
+ `
108
+
109
+ },
110
+
111
+ {id: 6, name: 'Git・Github', bgColor: 'black',
112
+
113
+ description: `
114
+
115
+ text
116
+
117
+ `
118
+
119
+ },
120
+
121
+ {id: 7, name: 'webpack', bgColor: 'skyblue',
122
+
123
+ description: `
124
+
125
+ text
126
+
127
+ `
128
+
129
+ }
130
+
131
+ ],
132
+
133
+ show: false
134
+
135
+ }
136
+
137
+ },
138
+
139
+ methods: {
140
+
141
+ toggleAccordion: function() {
142
+
143
+ this.show = !this.show
144
+
145
+ }
146
+
147
+ }
148
+
149
+ }
68
150
 
69
151
  ```
70
152
 
71
- ```JavaScript
72
-
73
- export default {
74
-
75
- name: 'AccordionComponent',
76
-
77
- data() {
78
-
79
- return {
80
-
81
- skills: [
82
-
83
- {id: 1, name: 'HTML・CSS', bgColor: 'red',
84
-
85
- description: `
86
-
87
- text
88
-
89
- `
90
-
91
- },
92
-
93
- {id: 2, name: 'JavaScript', bgColor: 'gold',
94
-
95
- description: `
96
-
97
- text
98
-
99
- `
100
-
101
- },
102
-
103
- {id: 3, name: 'Vue.js', bgColor: 'forestgreen',
104
-
105
- description: `
106
-
107
- text
108
-
109
- `
110
-
111
- },
112
-
113
- {id: 4, name: 'Sass', bgColor: 'hotpink',
114
-
115
- description: `
116
-
117
- text
118
-
119
- `
120
-
121
- },
122
-
123
- {id: 5, name: 'Firebase', bgColor: 'orange',
124
-
125
- description: `
126
-
127
- text
128
-
129
- `
130
-
131
- },
132
-
133
- {id: 6, name: 'Git・Github', bgColor: 'black',
134
-
135
- description: `
136
-
137
- text
138
-
139
- `
140
-
141
- },
142
-
143
- {id: 7, name: 'webpack', bgColor: 'skyblue',
144
-
145
- description: `
146
-
147
- text
148
-
149
- `
150
-
151
- }
152
-
153
- ],
154
-
155
- show: false
156
-
157
- }
158
-
159
- },
160
-
161
- methods: {
162
-
163
- toggleAccordion: function() {
164
-
165
- this.show = !this.show
166
-
167
- }
168
-
169
- }
170
-
171
- }
153
+ ```SCSS
154
+
155
+ <style lang="scss">
156
+
157
+ .accordion {
158
+
159
+ margin: 10px;
160
+
161
+ width: 400px;
162
+
163
+ margin-bottom: 20px;
164
+
165
+ border: 10px solid red;
166
+
167
+ .label {
168
+
169
+ height: 30px;
170
+
171
+ line-height: 30px;
172
+
173
+ text-align: center;
174
+
175
+ color: white;
176
+
177
+ cursor: pointer;
178
+
179
+ h2 {
180
+
181
+ font-weight: bold;
182
+
183
+ line-height: inherit;
184
+
185
+ }
186
+
187
+ .label-icon {
188
+
189
+ margin-left: 10px;
190
+
191
+ }
192
+
193
+ } //.header
194
+
195
+ .box {
196
+
197
+ margin-top: 10px;
198
+
199
+ overflow: hidden;
200
+
201
+ background-color: white;
202
+
203
+ width: 100%;
204
+
205
+ display: flex;
206
+
207
+ img {
208
+
209
+ display: block;
210
+
211
+ width: 100px;
212
+
213
+ height: 100px;
214
+
215
+ }
216
+
217
+ } //.body
218
+
219
+ } //.accordion
220
+
221
+
222
+
223
+ // 回転アニメーション
224
+
225
+ .rotate {
226
+
227
+ transform: rotate(180deg);
228
+
229
+ transition: 0.3s;
230
+
231
+ }
232
+
233
+
234
+
235
+ // 開閉アニメーション
236
+
237
+ .slide-enter-active {
238
+
239
+ transition-duration: 0.3s;
240
+
241
+ transition-timing-function: ease-in;
242
+
243
+ }
244
+
245
+ .slide-leave-active {
246
+
247
+ transition-duration: 0.3s;
248
+
249
+ transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
250
+
251
+ }
252
+
253
+ .slide-enter-to, .slide-leave {
254
+
255
+ max-height: 100px;
256
+
257
+ overflow: hidden;
258
+
259
+ }
260
+
261
+ .slide-enter, .slide-leave-to {
262
+
263
+ max-height: 0;
264
+
265
+ overflow: hidden;
266
+
267
+ }
268
+
269
+ </style>
172
270
 
173
271
  ```

3

2019/07/03 14:24

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```html
46
46
 
47
- <div class="accordion" v-for="skill in skills" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
47
+ <div class="accordion" v-for="skill in skills" v-bind:key="skill.id" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
48
48
 
49
49
  <div class="label" v-on:click="toggleAccordion" v-bind:style="{ backgroundColor: skill.bgColor }">
50
50
 

2

2019/07/03 14:13

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -44,7 +44,7 @@
44
44
 
45
45
  ```html
46
46
 
47
- <div class="accordion" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
47
+ <div class="accordion" v-for="skill in skills" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
48
48
 
49
49
  <div class="label" v-on:click="toggleAccordion" v-bind:style="{ backgroundColor: skill.bgColor }">
50
50
 

1

誤字の修正

2019/07/03 14:07

投稿

take-t.t.
take-t.t.

スコア360

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  いつもお世話になっております。
2
2
 
3
- 現在vue-cliにて、タイトル通りの減少が起きて困っています。
3
+ 現在vue-cliにて、タイトル通りの現象が起きて困っています。
4
4
 
5
5
  やりたい事は下記のコードで作ったコンポーネントを↓の画像のように別の.vueファイルで使いたいです。
6
6