APIで取得したdataがundifinedになってしまう

Question

APIで取得したデータを使ってcomutedでページネーションのための処理を記述しようとしたところ、データがうまく使えない状態です。

解決したい内容
APIを使って取得し格納したデータの内容の確認方法

VuejsでTwitchAPIを使ってゲーム配信のデータを取得し表示するランキングアプリを作っています。
以下記述でTwitchAPIで取得したデータをstreamsに格納し、表示させることはできました。

export default {
  name: 'getstream',
  data() {
    return {
      streams: [],  // APIから取得したデータ
    }
  },
  mounted() {
    axios
      .get("https://api.twitch.tv/kraken/streams/?language=ja&limit=20", {headers: headers})
      .then((response) => this.streams = response.data.streams)
      .catch(error => console.log(error))
  },
}

次に以下のようにページネーションのためにこのデータを使った処理をcomputedに記述したところでエラーがでました。

export default {
  name: 'getstream',
  data() {
    return {
      streams: [],  // APIから取得したデータ
      parPage: 10,  // 1ページに表示するデータ件数
      currentPage: 1,  // 現在の表示ページ
      page: [],     // ページ数
    }
  },
  mounted() {
    axios
      .get("https://api.twitch.tv/kraken/streams/?language=ja&limit=20", {headers: headers})
      .then((response) => this.streams = response.data.streams)
      .catch(error => console.log(error))
  },

  methods: {
    // 取得したデータ数に応じてページ数を設定
    setPages() {
      let numberOfPages = Math.ceil(this.streams.length / this.parPage);  //全データ数/1ページに表示するデータ数
      for ( let index = 1; index <= numberOfPages; index++) {
        this.pages.push(index);
      }
    },
  },
  computed: {
    // ページ番号にあわせてテストデータを抽出
    paginate(streams) {
      let page = this.page;     //ページ数
      let perPage = this.perPage;   //1ページに表示されているデータ数
      let from = page * perPage - perPage;  //ページ数-1までに表示されるデータ数
      let to = page * perPage; //1ページに表示されるデータ数
      return streams.slice(from, to);
      // 1ページ目ならfrom=0 to=10 で0~10までのデータを取得する
      // 2ページ目ならfrom=10 to=20 で10~20までのデータを取得する
    },
    // 表示するデータを抽出
    displayStreams() {
      return this.paginate(this.streams);
    }
  }
}

TypeError: streams.slice is not a function

streamsが配列でないため、sliceできないエラーかと思い、console.log(streams)でデータ内容を確認しようとしました。
出力結果がundifinedとなりデータが格納されているはずなのに表示されませんでした。
axiosの処理の部分でconsole.logを使うとstreamの中身が表示できていたため、データ自体は取得はできていると思います。
mounted内の処理で取得したデータはdata(){}で定義した変数に格納されていると思っているのですが、違うのでしょうか。

vuejs自体もAPIを使ったデータ取得も経験がなく、手詰まりとなってしまいました。
ヒントとなりそうなことであればどんなことでも構いませんので、ご回答いただけると幸いです。

Answer 1

computedの使い方に誤りがあります。
computedは引数を取らないのと、paginateの最終行のstreamsにはthisが必要です。

    paginate() {
      let page = this.page;     //ページ数
      let perPage = this.perPage;   //1ページに表示されているデータ数
      let from = page * perPage - perPage;  //ページ数-1までに表示されるデータ数
      let to = page * perPage; //1ページに表示されるデータ数
      return this.streams.slice(from, to);
    }

Comments

[Nako4]

Masa-Shin様
ご回答ありがとうございます。
computedの引数を外したところうまく動きました。
computedには引数はとらないんですね。
ありがとうございました。

Answer 2

Vue は全く詳しくないので的外れでしたらすみません。

これが原因ではないですか？

要するにcomputedが最初に発火するとき、mountedまでに用意されない

ものを参照するとエラー吐くよ、という話です。
Vueライフサイクルの盲点、computedの一発目の発火はmountedより早い - Qiita

Comments

[Nako4]

Lhankor_Mhy様
ご回答ありがとうございます。
mountedをcreatedに変えてみましたが、全く同じエラーでした。

データ型が違う？というエラーだということでしたので、HTMLで{{ streams }}で表示させたところ[{AAA:AAA},{BBB:BBB},{CCC:CCC}]の形で表示できたので、型もあっているのでは？と思っています。

[Lhankor_Mhy]

> mountedをcreatedに変えてみましたが、全く同じエラーでした。

そうなる、ということが、回答のリンク先にも書いてありますので、一読されてはいかがでしょうか？

[Lhankor_Mhy]

ああ、失礼しました。非同期通信をcreatedにしたということですね。

[Lhankor_Mhy]

> データ型が違う？というエラーだということ

これはどなたかに指摘されたのですか？

---

個人的には、paginateの引数をどうやって渡しているのかな、という疑問があります。

[Nako4]

Lhankor_Mhy様
ご返信ありがとうございます。
誰かに指摘されたわけではなく、Typeerrorがデータ型が違うエラーだという認識でした。
paginateの引数を...についてはそもそも引数は必要なかったようです。
conputedで引数を与えておかないとdataで定義した値が使えないのかと思っていたので引数を与えていました。
疑問に思われていることを私が理解できていないと思われるので、うまく説明することができていないと思うのですが。。。
一応実装自体はできました。
色々と考えるヒントをいただきありがとうございました。