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

編集履歴

質問編集履歴

9

2019/07/03 18:20

投稿

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

スコア360

title CHANGED
File without changes
body CHANGED
@@ -85,6 +85,7 @@
85
85
  width: 400px;
86
86
  .label {
87
87
  height: 30px;
88
+ margin-bottom: 10px;
88
89
  text-align: center;
89
90
  color: white;
90
91
  cursor: pointer;

8

2019/07/03 18:20

投稿

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

スコア360

title CHANGED
File without changes
body CHANGED
@@ -82,26 +82,21 @@
82
82
  ```SCSS
83
83
  <style lang="scss">
84
84
  .accordion {
85
- margin: 10px;
86
85
  width: 400px;
87
- margin-bottom: 20px;
88
- border: 10px solid red;
89
86
  .label {
90
87
  height: 30px;
91
- line-height: 30px;
92
88
  text-align: center;
93
89
  color: white;
94
90
  cursor: pointer;
95
91
  h2 {
96
92
  font-weight: bold;
97
- line-height: inherit;
93
+ line-height: 30px;
98
94
  }
99
95
  .label-icon {
100
96
  margin-left: 10px;
101
97
  }
102
98
  } //.label
103
99
  .box {
104
- margin-top: 10px;
105
100
  overflow: hidden;
106
101
  background-color: white;
107
102
  width: 100%;

7

表記を分かりやすく修正

2019/07/03 17:46

投稿

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

スコア360

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

6

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

2019/07/03 15:12

投稿

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

スコア360

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

5

表記の修正

2019/07/03 14:30

投稿

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

スコア360

title CHANGED
File without changes
body CHANGED
@@ -94,7 +94,7 @@
94
94
  .label-icon {
95
95
  margin-left: 10px;
96
96
  }
97
- } //.header
97
+ } //.label
98
98
  .box {
99
99
  margin-top: 10px;
100
100
  overflow: hidden;
@@ -106,7 +106,7 @@
106
106
  width: 100px;
107
107
  height: 100px;
108
108
  }
109
- } //.body
109
+ } //.box
110
110
  } //.accordion
111
111
 
112
112
  // 回転アニメーション

4

記入漏れの修正

2019/07/03 14:26

投稿

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

スコア360

title CHANGED
File without changes
body CHANGED
@@ -1,32 +1,21 @@
1
1
  いつもお世話になっております。
2
- 現在vue-cliにて、タイトル通りの現象が起きて困っています。
3
- やりたい事は下記のコードで作ったコンポーネントを↓の画像のように別の.vueファイルで使いたいです。
2
+ 現在下記のコードで作ったコンポーネントを別の.vueファイル内で使おうとしているのですが、タイトル通りの現象が起きて困っています。
4
- ```vue
5
- <template>
6
- <section>
7
- <div class="skills-box">
8
- <AccordionComponent></AccordionComponent>
9
- </div> <!-- skills-box -->
10
- <router-link to="/" class="move"><i class="fas fa-angle-left"></i> BACK</router-link>
11
- </section>
12
- </template>
13
- ```
14
3
 
15
4
  [コンポーネントについての公式リファレンス](https://jp.vuejs.org/v2/guide/components.html)を読む限り、この現象を防ぐにはdata（この場合はshowの真偽値）を別コンポーネントに関数で管理すれば大丈夫だと理解しています。
16
5
  しかしこの場合はv-forで同一コンポーネント内でレンダリングしているのでdataを分けられず、結局タイトルに書いた現象がおきてしまいます。
17
6
  アコーディオンのコンポーネント内ではなく、使用先の.vueファイルでv-forする事も考えましたがそれは出来ませんでした。
18
7
 
19
- 色々と試行錯誤したもの解決策が見つからず完全に手詰まりになってしまっています。
8
+ 色々と試行錯誤したものの解決策が見つからず完全に手詰まりになってしまっています。
20
9
  なにか良い方法はあるのでしょうか、よろしければ何卒お力添えをお願いいたします。
21
10
 
22
- 以下がアコーディオンのコードになります。
11
+ 以下がアコーディオンのコードになります。（.vueファイルの中身を分けて記載しています。
23
12
  ```html
24
13
  <div class="accordion" v-for="skill in skills" v-bind:key="skill.id" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
25
14
  <div class="label" v-on:click="toggleAccordion" v-bind:style="{ backgroundColor: skill.bgColor }">
26
- <h2>{{ skill.name }}<i class="fa fa-angle-down header-icon" v-bind:class="{ rotate : show }"></i></h2>
15
+ <h2>{{ skill.name }}<i class="fa fa-angle-down label-icon" v-bind:class="{ rotate : show }"></i></h2>
27
16
  </div>
28
17
  <transition name="slide">
29
- <div class="body" v-show="show">
18
+ <div class="box" v-show="show">
30
19
  <img v-bind:src="require(`../assets/images/${skill.name}.png`)">
31
20
  <p>{{ skill.description }}</p>
32
21
  </div>
@@ -84,4 +73,64 @@
84
73
  }
85
74
  }
86
75
  }
76
+ ```
77
+ ```SCSS
78
+ <style lang="scss">
79
+ .accordion {
80
+ margin: 10px;
81
+ width: 400px;
82
+ margin-bottom: 20px;
83
+ border: 10px solid red;
84
+ .label {
85
+ height: 30px;
86
+ line-height: 30px;
87
+ text-align: center;
88
+ color: white;
89
+ cursor: pointer;
90
+ h2 {
91
+ font-weight: bold;
92
+ line-height: inherit;
93
+ }
94
+ .label-icon {
95
+ margin-left: 10px;
96
+ }
97
+ } //.header
98
+ .box {
99
+ margin-top: 10px;
100
+ overflow: hidden;
101
+ background-color: white;
102
+ width: 100%;
103
+ display: flex;
104
+ img {
105
+ display: block;
106
+ width: 100px;
107
+ height: 100px;
108
+ }
109
+ } //.body
110
+ } //.accordion
111
+
112
+ // 回転アニメーション
113
+ .rotate {
114
+ transform: rotate(180deg);
115
+ transition: 0.3s;
116
+ }
117
+
118
+ // 開閉アニメーション
119
+ .slide-enter-active {
120
+ transition-duration: 0.3s;
121
+ transition-timing-function: ease-in;
122
+ }
123
+ .slide-leave-active {
124
+ transition-duration: 0.3s;
125
+ transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
126
+ }
127
+ .slide-enter-to, .slide-leave {
128
+ max-height: 100px;
129
+ overflow: hidden;
130
+ }
131
+ .slide-enter, .slide-leave-to {
132
+ max-height: 0;
133
+ overflow: hidden;
134
+ }
135
+ </style>
87
136
  ```

3

2019/07/03 14:24

投稿

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

スコア360

title CHANGED
File without changes
body CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  以下がアコーディオンのコードになります。
23
23
  ```html
24
- <div class="accordion" v-for="skill in skills" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
24
+ <div class="accordion" v-for="skill in skills" v-bind:key="skill.id" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
25
25
  <div class="label" v-on:click="toggleAccordion" v-bind:style="{ backgroundColor: skill.bgColor }">
26
26
  <h2>{{ skill.name }}<i class="fa fa-angle-down header-icon" v-bind:class="{ rotate : show }"></i></h2>
27
27
  </div>

2

2019/07/03 14:13

投稿

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

スコア360

title CHANGED
File without changes
body CHANGED
@@ -21,7 +21,7 @@
21
21
 
22
22
  以下がアコーディオンのコードになります。
23
23
  ```html
24
- <div class="accordion" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
24
+ <div class="accordion" v-for="skill in skills" v-bind:style="{ border: '8px' + ' ' + 'solid' + ' ' + skill.bgColor, backgroundColor: skill.bgColor }">
25
25
  <div class="label" v-on:click="toggleAccordion" v-bind:style="{ backgroundColor: skill.bgColor }">
26
26
  <h2>{{ skill.name }}<i class="fa fa-angle-down header-icon" v-bind:class="{ rotate : show }"></i></h2>
27
27
  </div>

1

誤字の修正

2019/07/03 14:07

投稿

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

スコア360

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