vue.jsとFlickr APIを使って猫と犬の写真を表示させる

Question

前提・実現したいこと

vue.jsで猫と犬の画像を4枚ずつ表示させるため設定を行っています。

発生している問題・エラーメッセージ

猫か犬かのどちらかしか表示されません。
猫を４枚表示して、その後犬を４枚
もしくは犬を4枚表示して、その後猫を４枚表示させたいです。

該当のソースコード

html

<section id="gallery" class="gallery"> <div class="gallery__phrase">ギャラリー</div> <h2 class="gallery__title">Gallery</h2> <div class="image-gallery"> <div class="image-gallery__item" v-for="photo in photos"> <a v-bind:key="photo.id" v-bind:href="photo.pageURL" tooltip="photo" class="d-inline-block" target="_blank" > <img v-bind:src="photo.imageURL" v-bind:alt="photo" width="120" height="120" > </a> </div>

javascript

// Flickr画像の元ページのURLを返す
const getFlickrPageURL = photo => https://www.flickr.com/photos/${photo.owner}/${photo.id};

// Flickr画像のaltテキストを返す
const getFlickrText = (photo) => {
let text = "${photo.title}" by ${photo.ownername};
if (photo.license === '4') {
// Creative Commons Attribution（CC BY）ライセンス
text += ' / CC BY';
}
return text;
};

new Vue({
el: '#gallery', // elオプションの値に '#gallery' を設定
data: {
// 利用するデータを設定
photos:[],
},

created() {
// Vueが読み込まれたときに実行する処理を定義
this.fetchImagesFromFlickr('cat');
this.fetchImagesFromFlickr('dog');
},

methods: {
fetchImagesFromFlickr(searchText) {

  const url = getRequestURL(searchText);
  console.log(url)
  $.getJSON(url, (data) => {
    if (data.stat !== 'ok') {
      //this.photos();
      return;
    }

    this.photos = data.photos.photo.map(photo => ({
    id: photo.id,
    imageURL: getFlickrImageURL(photo, 'q'),
    pageURL: getFlickrPageURL(photo),
    text: getFlickrText(photo),
    
    
    
  }));
 
 const imagedata=data.photo.photo.map
 const cats=[this.photos]
 const dogs=[this.photos]
   imagedata=imagedata.concat(cats);
   imagedata=imagedata.concat(dogs);
    
  }); 
},

},

　});



Vue.directive('tooltip', {
bind(el, binding) {
$(el).tooltip({
title: binding.value,
placement: 'bottom',
});
},
unbind(el) {
$(el).tooltip('dispose');
},
});

試したこと

concat文をつかってみたのですが、あまり使い方が分からずという所です。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

質問の段階でソースが正しく挿入されていないので、全部検証しきれていないのですが、
methodsのところは

（略）
  methods: {
    fetchImagesFromFlickr(searchText) {
      const url = getRequestURL(searchText);
      console.log(url);
      $.getJSON(url, (data) => {
        if (data.stat !== "ok") {
          //this.photos();
          return;
        }

        if (data.photos.photo.length === 0) {
          return;
        }

        const imageData = data.photos.photo.map((photo) => ({
          id: photo.id,
          imageURL: getFlickrImageURL(photo, "q"),
          pageURL: getFlickrPageURL(photo),
          text: getFlickrText(photo),
        }));
        this.photos = this.photos.concat(imageData);
      });
    }
  }
以下略

としたらどうでしょうか。

concatの行はブラウザが対応してれば

   this.photos = [...this.photos, ...imageData]

でも可。

Comments

[shuttyy]

画像が猫も犬も表示されなくなりました。
下記にこのようなエラーが出てしまいます

Uncaught ReferenceError: fetchedPhotos is not defined
at Object.success (vue-gallery.js:76)
at c (jquery-3.4.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2)
at l (jquery-3.4.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.4.1.min.js:2)

[退会済みユーザー]

修正しました

[shuttyy]

まだ表示されないですね、同じエラーが発生します。
this.photo→const imageData に変えた瞬間から表示されなくなります。