teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問vue.js　Flickr APIから猫と犬の画像を取得するには

編集履歴

質問編集履歴

5

index.html追加

2020/12/05 09:58

投稿

kensuzu5
kensuzu5

スコア2

test CHANGED
File without changes
test CHANGED
@@ -36,6 +36,58 @@
36
36
 
37
37
  ### コード
38
38
 
39
+ ```index.html
40
+
41
+
42
+
43
+ <div class="image-gallery__item"
44
+
45
+ v-for="photo in photos"
46
+
47
+ >
48
+
49
+ <a
50
+
51
+ v-bind:key="photo.id"
52
+
53
+ v-bind:href="photo.pageURL"
54
+
55
+ tooltip="photo"
56
+
57
+ class="d-inline-block"
58
+
59
+ target="_blank"
60
+
61
+ >
62
+
63
+ <img
64
+
65
+ v-bind:src="photo.imageURL"
66
+
67
+ v-bind:alt="photo"
68
+
69
+ width="150"
70
+
71
+ height="150"
72
+
73
+ >
74
+
75
+ </a>
76
+
77
+ </div>
78
+
79
+ ```
80
+
81
+
82
+
83
+
84
+
85
+
86
+
87
+
88
+
89
+
90
+
39
91
  ```main.js
40
92
 
41
93
  new Vue({

4

写真

2020/12/05 09:58

投稿

kensuzu5
kensuzu5

スコア2

test CHANGED
File without changes
test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
  ### 現在の状態
14
14
 
15
- ![](f5620c93afe6f1f8b69c1f51b345fd2e.png)
15
+ ![イメージ説明](9b5db8860d1f7322ac306eb2a68fe30a.png)
16
16
 
17
17
 
18
18
 

3

const imageData = fetchedPhotos.map(photo => ({の修正

2020/12/05 09:55

投稿

kensuzu5
kensuzu5

スコア2

test CHANGED
File without changes
test CHANGED
@@ -142,7 +142,7 @@
142
142
 
143
143
 
144
144
 
145
- this.photos = data.photos.photo.map(photo => ({
145
+ const imageData = fetchedPhotos.map(photo => ({
146
146
 
147
147
  id: photo.id,
148
148
 

2

犬と猫の画像を両方表示させる方法をアドバイスお願いします。

2020/12/05 09:16

投稿

kensuzu5
kensuzu5

スコア2

test CHANGED
File without changes
test CHANGED
@@ -4,9 +4,29 @@
4
4
 
5
5
 
6
6
 
7
- ・リクエストパラメータを猫と犬を2つずつ作成済み
7
+ ・this.photosを上書きしてしまって片方だけ表示しています。
8
8
 
9
+
10
+
11
+
12
+
9
- ・犬と猫の画像を表示させたい
13
+ ### 現在の状態
14
+
15
+ ![](f5620c93afe6f1f8b69c1f51b345fd2e.png)
16
+
17
+
18
+
19
+
20
+
21
+ ### 質問内容
22
+
23
+
24
+
25
+ 下記のコードにスプレッド構文やforEach()を使って犬と猫の画像を両方表示させるにはどのような設定をすればよいのかアドバイスお願いします。
26
+
27
+
28
+
29
+ this.photos = data.photos.photo.map(photo => ({
10
30
 
11
31
 
12
32
 
@@ -120,7 +140,9 @@
120
140
 
121
141
 
122
142
 
143
+
144
+
123
- const imageData = fetchedPhotos.map(photo => ({
145
+ this.photos = data.photos.photo.map(photo => ({
124
146
 
125
147
  id: photo.id,
126
148
 
@@ -132,8 +154,6 @@
132
154
 
133
155
  }));
134
156
 
135
-
136
-
137
157
  });
138
158
 
139
159
  },
@@ -144,16 +164,4 @@
144
164
 
145
165
 
146
166
 
147
- ```
167
+ ```
148
-
149
- ### 質問内容
150
-
151
-
152
-
153
- 下記のコードにスプレッド構文やforEach()を使って犬と猫の画像を両方表示させるにはどのような設定をすればよいのかアドバイスお願いします。
154
-
155
-
156
-
157
-
158
-
159
- const imageData = fetchedPhotos.map(photo => ({

1

vue.js　Flickr APIから猫と犬の画像を取得するには

2020/12/05 05:53

投稿

kensuzu5
kensuzu5

スコア2

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,4 @@
1
- 前提・実現したいこと　
1
+ ### **前提・実現したいこと**
2
-
3
- ---------------------------
4
2
 
5
3
  vue.jsで猫と犬の画像を4枚ずつ表示させるため設定を行っています。
6
4
 
@@ -8,19 +6,19 @@
8
6
 
9
7
  ・リクエストパラメータを猫と犬を2つずつ作成済み
10
8
 
11
- ・concatを使って犬と猫の画像を表示させたい
9
+ ・犬と猫の画像を表示させたい
12
10
 
13
11
 
14
12
 
15
13
 
16
14
 
17
- コード
18
15
 
16
+
17
+ ### コード
18
+
19
- -------------------------------------------
19
+ ```main.js
20
20
 
21
21
  new Vue({
22
-
23
-
24
22
 
25
23
  el: '#gallery', // elオプションの値に '#gallery' を設定
26
24
 
@@ -28,9 +26,7 @@
28
26
 
29
27
  components: {
30
28
 
31
- // ローカル登録するコンポーネントを設定
29
+
32
-
33
- // ( コンポーネントを利用しない場合は components: {}, は削除すること )
34
30
 
35
31
  },
36
32
 
@@ -42,11 +38,17 @@
42
38
 
43
39
  // 利用するデータを設定
44
40
 
45
- photos:['photo.id'],
41
+
46
42
 
47
-
43
+ photos:[],
44
+
45
+
48
46
 
49
47
  },
48
+
49
+
50
+
51
+
50
52
 
51
53
 
52
54
 
@@ -58,35 +60,39 @@
58
60
 
59
61
  this.fetchImagesFromFlickr('dog');
60
62
 
61
-
63
+ },
62
64
 
63
-
64
65
 
65
- },
66
+
67
+
68
+
69
+
70
+
71
+
66
72
 
67
73
 
68
74
 
69
75
  methods: {
70
76
 
71
-
72
-
73
-
74
-
75
77
  fetchImagesFromFlickr(searchText) {
76
78
 
77
-
78
79
 
79
-
80
80
 
81
81
  const url = getRequestURL(searchText);
82
82
 
83
83
 
84
84
 
85
+
86
+
87
+
88
+
89
+
90
+
85
91
  $.getJSON(url, (data) => {
86
92
 
87
93
  if (data.stat !== 'ok') {
88
94
 
89
- this.photos();
95
+ //this.photos();
90
96
 
91
97
  return;
92
98
 
@@ -94,11 +100,13 @@
94
100
 
95
101
 
96
102
 
97
- const fetchedPhotos = data.photos.photo;
98
103
 
99
-
100
104
 
101
-
105
+
106
+
107
+
108
+
109
+
102
110
 
103
111
  if (fetchedPhotos.length === 0) {
104
112
 
@@ -106,11 +114,13 @@
106
114
 
107
115
  }
108
116
 
109
-
117
+
110
118
 
111
- this.photos = concat
112
119
 
120
+
121
+
122
+
113
- fetchedPhotos.map(photo => ({
123
+ const imageData = fetchedPhotos.map(photo => ({
114
124
 
115
125
  id: photo.id,
116
126
 
@@ -120,38 +130,30 @@
120
130
 
121
131
  text: getFlickrText(photo),
122
132
 
123
- }));
133
+ }));
124
134
 
135
+
136
+
125
- });
137
+ });
126
138
 
127
139
  },
128
140
 
129
141
  },
130
142
 
131
- });
143
+ 　});
132
-
133
-
134
144
 
135
145
 
136
146
 
137
- 下記、質問内容
147
+ ```
138
148
 
139
- -----------------------------------------------------
140
-
141
- this.photos = concat ();
149
+ ### 質問内容
142
-
143
- fetchedPhotos.map(photo => ({
144
-
145
- の部分をconcatを使って犬と猫の画像両方表示させたいのですが、どうやって修正を行えばよいのか、検索して解決できなかったためアドバイスをどなたかお願いします。
146
150
 
147
151
 
148
152
 
149
- 試したこと
150
-
151
- ------------------------------------------
153
+ 下記のコードにスプレッド構文やforEach()を使って犬と猫の画像を両方表示させるにはどのような設定をすればよいのかアドバイスお願いします。
152
-
153
- リクエストパラメータで2つ作成し、片方だけなら表示できました。
154
154
 
155
155
 
156
156
 
157
+
158
+
157
- this.photos = cat concat (dog);を入力し、実行しましたが画像が表示されませんでした。
159
+ const imageData = fetchedPhotos.map(photo => ({