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

質問編集履歴

1

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

2019/01/23 04:44

投稿

退会済みユーザー
title CHANGED
File without changes
body CHANGED
@@ -12,42 +12,118 @@
12
12
 
13
13
  ---
14
14
  ```HTML
15
- <div id="app">
15
+ <div id="app">
16
+ <div>
16
- <div id="imgArea">
17
+ <div id="imgArea">
18
+ <img :src="itemsDire[index].src" :alt="itemsDire[index].alt" class="imgCanvas">
17
- <div v-for="item in items">
19
+ <div v-show="showA">
20
+ <div v-for="item in itemsA" :val="item.value">
18
- <img v-bind:src="item.src" v-bind:alt="item.alt" v-show="showImg" class="imgCanvas" v-show="showImg" v-bind:class="item.class">
21
+ <img :key="item.src" :src="item.src" :alt="item.alt" v-show="showShadow" class="imgCanvas" :class="item.class">
19
- </div>
22
+ </div>
20
- </div>
23
+ </div>
21
- <div id="BtnArea">
24
+ <div v-show="showB">
25
+ <div v-for="item in itemsB" :val="item.value">
22
- <input type="button" v-for="item in itemTimes" @click="changeImg" v-bind:value="item" class="timeButton">
26
+ <img :key="item.src" :src="item.src" :alt="item.alt" v-show="showShadow" class="imgCanvas" :class="item.class">
23
- </div>
27
+ </div>
24
- </div>
28
+ </div>
29
+ </div>
30
+ <div id="btnArea">
31
+ <div id="directionBtnArea">
32
+ <input type="button" @click="changeNW" value="NW">
33
+ <input type="button" @click="changeNE" value="NE">
34
+ <input type="button" @click="changeSE" value="SE">
35
+ <input type="button" @click="changeSW" value="SW">
36
+ </div>
37
+ <div id="shadowBtnArea">
38
+ <input type="button" v-for="item in itemTimes" @click="changeShadow" :value="item" :class="item">
39
+ </div>
40
+ <div id="seasonBtnArea">
41
+ <input type="button" @click="showA=!showA" value="A">
42
+ <input type="button" @click="showB=!showB" value="B">
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </div>
25
47
  ```
26
48
  ```Vue.js
27
49
  new Vue ({
28
50
  el: '#app',
29
51
  data: {
52
+ itemsDire: [],
30
- items: [],
53
+ itemsA: [],
54
+ itemsB: [],
31
55
  itemTimes:['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00'],
32
56
  index: 0,
57
+ showA: true,
33
- showImg: false,
58
+ showB: false,
59
+ showShadow: true
34
60
  },
35
61
  methods: {
36
- inputImg: function() {
62
+ changeNW: function() {
37
- axios.get('json/imgList.json').then(function(response) {
63
+ axios.get('json/NW.json').then(function(response) {
38
64
  console.log(response)
39
- this.itemsDire = response.data[0].items
65
+ this.itemsDire = response.data[0].imageDire;
66
+ this.itemsA = response.data[0].imageA;
67
+ this.itemsB = response.data[0].imageB;
40
68
  }.bind(this)).catch(function(e) {
41
69
  console.error('error!')
42
70
  })
43
71
  },
44
- changeImg: function() {
72
+ changeNE: function() {
45
-
73
+ axios.get('json/NE.json').then(function(response) {
74
+ console.log(response)
75
+ this.itemsDire = response.data[0].imageDire;
76
+ this.itemsA = response.data[0].imageA;
77
+ this.itemsB = response.data[0].imageB;
78
+ }.bind(this)).catch(function(e) {
79
+ console.error('error!')
80
+ })
81
+ },
82
+ changeSE: function() {
83
+ axios.get('json/SE.json').then(function(response) {
84
+ console.log(response)
85
+ this.itemsDire = response.data[0].imageDire;
86
+ this.itemsA = response.data[0].imageA;
87
+ this.itemsB = response.data[0].imageB;
88
+ }.bind(this)).catch(function(e) {
89
+ console.error('error!')
90
+ })
91
+ },
92
+ changeSW: function() {
93
+ axios.get('json/SW.json').then(function(response) {
94
+ console.log(response)
95
+ this.itemsDire = response.data[0].imageDire;
96
+ this.itemsA = response.data[0].imageA;
97
+ this.itemsB = response.data[0].imageB;
98
+ }.bind(this)).catch(function(e) {
99
+ console.error('error!')
100
+ })
101
+ },
102
+ changeShadow: function() {
103
+ this.value = event.target.value;
104
+ console.log(this.value);
46
105
  }
106
+ },
107
+ created: function() {
108
+ axios.get('json/NW.json').then(function(response) {
109
+ console.log(response)
110
+ this.itemsDire = response.data[0].imageDire;
111
+ this.itemsA = response.data[0].imageA;
112
+ this.itemsB = response.data[0].imageB;
113
+ }.bind(this)).catch(function(e) {
114
+ console.error('error!')
115
+ })
47
116
  }
48
117
  })
49
118
  ```
50
119
  ---
120
+ 追記
51
- 画像を配列に入れるinputImg処理部分は省かせていただきました。
121
+ コードだとわりにくいと思い修正をさせていただきました。
122
+ まず土台となる画像(itemDire)を表示し、季節の選択(AかBか)、その後時間を指定して影を表示させるという流れになっております。
123
+ 全ての画像はaxiosを使い、jsonファイルでdata内のそれぞれの配列に入れています。
124
+
125
+ 現状はevent.target.valueでボタンに設定したvalue(時間)を取得できましたが、その後どうやってdata内部の配列(itemAとitemB)と比較をしshowを切り替えるかという部分です。
126
+
127
+ ---
52
128
  このままmethodsのみで処理できるのか、computedを使うのか、componentで受け渡しをした方がスマートなのかわからずに困っております。
53
129
  ご回答よろしくお願いします。