APIから取得した値を配列に格納したい

Question

javascriptの値の扱い方について質問です。
天気予報APIから値を13日分取得できました（console.logで確認済み）
それを表示したいのですが、どうやら値がひとつしか dataに定義した配列infos[]に入っていません。
実際にひとつしか値が表示されません。

ロジックのどこに間違いがありますでしょうか？ （foreach当たりですかね・・）

getDataUrl.forEach((value, index) => { //getDataUrlには13個のurlが配列で格納
        axios
          .get(value)
          .then(
            function (response) {
              var weather = response.data[0];

              this.infos[index] = [
                {
                  date: weather.applicable_date, //日付
                  max_temp: weather.max_temp, //最高気温
                  wind: weather.wind_direction_compass, //風向き
                  weather_state: weather.weather_state_name, //天候
                  image_url:
                    "https://www.metaweather.com/static/img/weather/ico/" +
                    weather.weather_state_abbr +
                    ".ico", //天気画像
                },
              ];
            }.bind(this)
          )
          .catch(function (error) {
            console.log(error);
          });
      }); //foreach

Comments

[Masa-Shin]

Vueのバージョンは何ですか？

Answer 1

バージョンが書いていないのでVue2だと仮定して回答します。
根本原因かは分かりませんが、配列への値のセットの仕方に問題があるかと思います。

ドキュメントにあるように、indexを指定して配列に値を追加する場合、以下のようにする必要があります。

this.$set(this.infos, index, <追加したいデータ>)

Comments

[sohh]

配列に値をセットするときはthis.$set(変更したい配列名, index, 値)と書くんですね
指摘いただいた書き方を試したところ、意図するように配列に値が入り、解決しました
ありがとうございます