nuxt/vueにて各子コンポーネントでapiを使用しdataを受け取り表示させたい

Question

やりたいこと

nuxt/vueにて各子コンポーネントでapiを使用しdataを受け取り表示させたい

現状

親コンポーネントでapiを使用すればデータは表示できる
子コンポーネントでapiを使用した場合は、親コンポーネントに表示されない

構造

pages/index.vue => 親

<template>
  <div>
    <div id="headerImage">
    </div>
    <About />
  </div>
</template>

<script>
import About from "@/components/About";
export default {
  components: {
    About
  }
};
</script>

<style lang="scss">
#headerImage {
  width: 100%;
  height: 600px;
  background-image: url("~@/assets/images/background.jpeg");
  background-size: cover;
}
</style>

components/About.vue => 子

<template>
    <div>
        <h1>{{ aboutItem.name }}</h1>
        <h1>{{ aboutItem.university }}</h1>
        <h1>{{ aboutItem.mail }}</h1>
    </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      aboutItem: ""
    };
  },
  async asyncData() {
    const { data } = await axios.get(
      "APIのURL",
      {
        headers: { "X-API-KEY": process.env.API_KEY }
      }
    );
    return {
      aboutItem: data
    };
  },
  ready: function() {
    console.log("items from child component", aboutItem);
  }
};
</script>

よろしくお願いします

Answer 1

asyncData() は Nuxt.js のページコンポーネントに実装されている仕組みの1つであり、 Vue.js のものではありません。
Vueのコンポーネントで動かしたいのであれば mounted() に記載するなどすべきだと思います。

同類の質問
microCMSとNuxt.jsでaxiosを使用したAPI取得時にコンポーネント化すると出力できない｜teratail

Comments

[RetsukiYONEICHI]

ありがとうございます！！
僕の方でも、
親コンポーネントの方でpromise.allで必要なdataを取得して
子コンポーネントに配布して表示することができました！

https://qiita.com/k_0214/items/7e809b4a34c5b0e7c32c