teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Vue.jsでbuttonを押した際に値を取得して画像を表示させたい

編集履歴

質問編集履歴

1

コードを詳しく追加、処理部分の具体的な説明の追加

2019/01/23 04:44

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -26,25 +26,69 @@
26
26
 
27
27
  ```HTML
28
28
 
29
- <div id="app">
29
+ <div id="app">
30
+
30
-
31
+ <div>
32
+
31
- <div id="imgArea">
33
+ <div id="imgArea">
34
+
32
-
35
+ <img :src="itemsDire[index].src" :alt="itemsDire[index].alt" class="imgCanvas">
36
+
33
- <div v-for="item in items">
37
+ <div v-show="showA">
38
+
34
-
39
+ <div v-for="item in itemsA" :val="item.value">
40
+
35
- <img v-bind:src="item.src" v-bind:alt="item.alt" v-show="showImg" class="imgCanvas" v-show="showImg" v-bind:class="item.class">
41
+ <img :key="item.src" :src="item.src" :alt="item.alt" v-show="showShadow" class="imgCanvas" :class="item.class">
36
-
42
+
37
- </div>
43
+ </div>
38
-
44
+
39
- </div>
45
+ </div>
40
-
46
+
41
- <div id="BtnArea">
47
+ <div v-show="showB">
48
+
42
-
49
+ <div v-for="item in itemsB" :val="item.value">
50
+
43
- <input type="button" v-for="item in itemTimes" @click="changeImg" v-bind:value="item" class="timeButton">
51
+ <img :key="item.src" :src="item.src" :alt="item.alt" v-show="showShadow" class="imgCanvas" :class="item.class">
44
-
52
+
45
- </div>
53
+ </div>
46
-
54
+
47
- </div>
55
+ </div>
56
+
57
+ </div>
58
+
59
+ <div id="btnArea">
60
+
61
+ <div id="directionBtnArea">
62
+
63
+ <input type="button" @click="changeNW" value="NW">
64
+
65
+ <input type="button" @click="changeNE" value="NE">
66
+
67
+ <input type="button" @click="changeSE" value="SE">
68
+
69
+ <input type="button" @click="changeSW" value="SW">
70
+
71
+ </div>
72
+
73
+ <div id="shadowBtnArea">
74
+
75
+ <input type="button" v-for="item in itemTimes" @click="changeShadow" :value="item" :class="item">
76
+
77
+ </div>
78
+
79
+ <div id="seasonBtnArea">
80
+
81
+ <input type="button" @click="showA=!showA" value="A">
82
+
83
+ <input type="button" @click="showB=!showB" value="B">
84
+
85
+ </div>
86
+
87
+ </div>
88
+
89
+ </div>
90
+
91
+ </div>
48
92
 
49
93
  ```
50
94
 
@@ -56,40 +100,134 @@
56
100
 
57
101
  data: {
58
102
 
103
+ itemsDire: [],
104
+
59
- items: [],
105
+ itemsA: [],
106
+
107
+ itemsB: [],
60
108
 
61
109
  itemTimes:['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00'],
62
110
 
63
111
  index: 0,
64
112
 
113
+ showA: true,
114
+
65
- showImg: false,
115
+ showB: false,
116
+
117
+ showShadow: true
66
118
 
67
119
  },
68
120
 
69
121
  methods: {
70
122
 
71
- inputImg: function() {
123
+ changeNW: function() {
72
-
124
+
73
- axios.get('json/imgList.json').then(function(response) {
125
+ axios.get('json/NW.json').then(function(response) {
74
-
126
+
75
- console.log(response)
127
+ console.log(response)
76
-
128
+
77
- this.itemsDire = response.data[0].items
129
+ this.itemsDire = response.data[0].imageDire;
130
+
78
-
131
+ this.itemsA = response.data[0].imageA;
132
+
133
+ this.itemsB = response.data[0].imageB;
134
+
79
- }.bind(this)).catch(function(e) {
135
+ }.bind(this)).catch(function(e) {
80
-
136
+
81
- console.error('error!')
137
+ console.error('error!')
82
-
138
+
83
- })
139
+ })
84
-
140
+
85
- },
141
+ },
86
-
142
+
87
- changeImg: function() {
143
+ changeNE: function() {
144
+
88
-
145
+ axios.get('json/NE.json').then(function(response) {
146
+
89
-
147
+ console.log(response)
148
+
149
+ this.itemsDire = response.data[0].imageDire;
150
+
151
+ this.itemsA = response.data[0].imageA;
152
+
153
+ this.itemsB = response.data[0].imageB;
154
+
155
+ }.bind(this)).catch(function(e) {
156
+
157
+ console.error('error!')
158
+
159
+ })
160
+
161
+ },
162
+
163
+ changeSE: function() {
164
+
165
+ axios.get('json/SE.json').then(function(response) {
166
+
167
+ console.log(response)
168
+
169
+ this.itemsDire = response.data[0].imageDire;
170
+
171
+ this.itemsA = response.data[0].imageA;
172
+
173
+ this.itemsB = response.data[0].imageB;
174
+
175
+ }.bind(this)).catch(function(e) {
176
+
177
+ console.error('error!')
178
+
179
+ })
180
+
181
+ },
182
+
183
+ changeSW: function() {
184
+
185
+ axios.get('json/SW.json').then(function(response) {
186
+
187
+ console.log(response)
188
+
189
+ this.itemsDire = response.data[0].imageDire;
190
+
191
+ this.itemsA = response.data[0].imageA;
192
+
193
+ this.itemsB = response.data[0].imageB;
194
+
195
+ }.bind(this)).catch(function(e) {
196
+
197
+ console.error('error!')
198
+
199
+ })
200
+
201
+ },
202
+
203
+ changeShadow: function() {
204
+
205
+ this.value = event.target.value;
206
+
207
+ console.log(this.value);
90
208
 
91
209
  }
92
210
 
211
+ },
212
+
213
+ created: function() {
214
+
215
+ axios.get('json/NW.json').then(function(response) {
216
+
217
+ console.log(response)
218
+
219
+ this.itemsDire = response.data[0].imageDire;
220
+
221
+ this.itemsA = response.data[0].imageA;
222
+
223
+ this.itemsB = response.data[0].imageB;
224
+
225
+ }.bind(this)).catch(function(e) {
226
+
227
+ console.error('error!')
228
+
229
+ })
230
+
93
231
  }
94
232
 
95
233
  })
@@ -98,7 +236,21 @@
98
236
 
99
237
  ---
100
238
 
239
+ 追記
240
+
101
- 画像を配列に入れるinputImgの処理部分は省かせていただきました。
241
+ 先のコードだとわかりにくいと思い修正をさせていただきました。
242
+
243
+ まず土台となる画像（itemDire）を表示し、季節の選択（AかBか）、その後時間を指定して影を表示させるという流れになっております。
244
+
245
+ 全ての画像はaxiosを使い、jsonファイルでdata内のそれぞれの配列に入れています。
246
+
247
+
248
+
249
+ 現状はevent.target.valueでボタンに設定したvalue（時間）を取得できましたが、その後どうやってdata内部の配列（itemAとitemB）と比較をしshowを切り替えるかという部分です。
250
+
251
+
252
+
253
+ ---
102
254
 
103
255
  このままmethodsのみで処理できるのか、computedを使うのか、componentで受け渡しをした方がスマートなのかわからずに困っております。
104
256