Vue3で親から渡されたリストデータを子コンポーネントで表示できません

Question

前提

親子関係のあるコンポーネントで、親で取得したリストデータを子に渡します。
子はそのリストデータを表示するだけですが、リストデータ取得をawait使っているせいなのかF5等で更新した直後は表示されません。

• 親コンポーネントの呼び出し
• axiosでリストデータの取得開始
• 子コンポーネントを描画
• リストデータの取得完了

上記のようにリストデータの取得中に子コンポーネントが描画されるため、リストが表示されないと考えております。

リストデータの取得が完了してから子コンポーネントを描画させるか、
リストデータ取得の完了で子コンポーネントを再描画させる方法など何かしらの解決方法はございますでしょうか。

または、子コンポーネント側でリストデータを取るとかになるのでしょうか。
よろしくお願いいたします。

実現したいこと

• 親コンポーネントを表示した時に子コンポーネントに渡したリストを表示したい。

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

ページ遷移した直後のリストは表示されませんが、例えば「再取得」ボタンなどでリストデータを再取得して子コンポーネントに渡せばうまく表示されます。

該当のソースコード

// 親コンポーネント
<script setup>
import axios from 'axios';
import { reactive } from 'vue';

// 子に渡すリストデータ
let somethingList = reactive({});

// リストデータを取得（オブジェクトの配列が返ってくる）
const getData = async () => {
  const { data } = await axios.get('/api/something');
  somethingList = data;
};

// 再取得用
const reGet = () => {
  getData();
}
</script>

<template>
  <div>
    <Child :somethingList="somethingList" />
    <button @click="reGet">再取得</button>
  </div>
</template>

// 子コンポーネント
<script setup>
const props = defineProps({
  somethingList: Object[]
});
</script>

<template>
  <ul>
    <li v-for="something in somethingList">
      {{ something.id }}
    </li>
  </ul>
</template>

試したこと

再取得ボタンを作ってリストデータを再取得して子コンポーネントに渡せばうまく表示されました。

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

vue: 3.2.45
vue-router: 4.0.16
axios: 0.27.2

Answer 1

現状、コンポーネントが読み込まれた時にデータを取得する処理が入っていないのでそれが原因かなと推測しています。
そのため、マウント時にデータを取得する処理を親コンポーネント側に追加すれば上手くいきそうな気がします。
下記を追加してうまくいくか見ていただけますでしょうか？

onMounted(() => {
  getData();
});

今回は マウントされた時 のライフライクルフックを使用しましたが、他にもあるので詳細はこちらを見ていただければと思います！
https://v3.ja.vuejs.org/api/options-lifecycle-hooks.html

Comments

[tampopopofu]

回答ありがとうございます！
ご指摘の方法でうまくいきました。
ありがとうございました！

[keita]

お試しいただきありがとうございます！
うまくいって良かったです🎉