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

Question

前提・実現したいこと

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

・this.photosを上書きしてしまって片方だけ表示しています。

現在の状態

質問内容

下記のコードにスプレッド構文やforEach()を使って犬と猫の画像を両方表示させるにはどのような設定をすればよいのかアドバイスお願いします。

this.photos = data.photos.photo.map(photo => ({

コード

<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="150"
          height="150"
        >
      </a>
      </div>

new Vue({
  el: '#gallery', // elオプションの値に '#gallery' を設定
  
  components: {
   
  },

    
  data: {
    // 利用するデータを設定
   
    photos:[],

  },



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





  methods: {
    fetchImagesFromFlickr(searchText) {

      const url = getRequestURL(searchText);
      



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




       if (fetchedPhotos.length === 0) {
          return;
        }
         


          
        const imageData = fetchedPhotos.map(photo => ({
          id: photo.id,
          imageURL: getFlickrImageURL(photo, 'q'),
          pageURL: getFlickrPageURL(photo),
          text: getFlickrText(photo),
          }));
      }); 
    },
   },
　});

Comments

[plasticgrammer]

『concatを使って』と繰り返していますが、これは配列のconcatメソッドを使うという意味なのでしょうか？
concatを使うことが目的なのですか？犬と猫の画像両方表示させることができればいいのですよね？

上記の点について明記をお願いします。

[kensuzu5]

説明不足申し訳ございません。

・配列のconcatメソッドを使うという意味です。
・concatを使うことが目的です。

[Lhankor_Mhy]

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7

[kensuzu5]

上記のコメントにconcatを使うと書きましたが、他に何か方法があればアドバイスお願いします。

concatは使わずに修正しようと思います。

Answer 1

const imageData = (略)

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

に修正をしたら画像が4枚ずつ表示されました。

Comments

[naoya0922]

質問失礼します。
...this.photosはどこからもってきたのでしょうか？

Answer 2

テンプレートではthis.photosの中の猫犬画像を表示しているんですよね？

const imageData = (略)

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

とすれば、this.photosの中身は

[
 { id: ..., imageURL: ..., pageURL..., text: "猫" },
 { id: ..., imageURL: ..., pageURL..., text: "猫" },
 { id: ..., imageURL: ..., pageURL..., text: "犬" },
 { id: ..., imageURL: ..., pageURL..., text: "犬" },
]

となるはずです。

Comments

[kensuzu5]

コメントありがとうございます。
const imageData = fetchedPhotos.map(photo => ({
this.photos = [...this.photos, ...imageData];

で実行したところUncaught SyntaxError: Unexpected token '.'エラーが出てしまいました。

this.photosの書き方が間違っていますでしょうか？

[neko_daisuki]

imageData は質問を編集する前の内容を想定していましたが、
現在の this.photos = data.photos.photo.map(photo => ({ ... }) で取得できているのなら

const imageData = data.photos.photo.map(photo => ({ ... })
this.photos = [...this.photos, ...imageData]

としてみてください。

[kensuzu5]

ありがとうございます。
無事に犬と猫の画像を4枚ずつ取得することができました。
最後に確認ですが現在の状態で左に-->の消し方をアドバイスお願いします。

何度もすいません。

[neko_daisuki]

これは掲載してるテンプレートの外側にあるコメントではないでしょうか。
<!-- コメント --> ←こいつ
それを消せば消えると思います。

[kensuzu5]

ありがとうございます。
無事解決できました。