vue.jsで親コンポーネントから子コンポーネントに渡した値がundefinedになる

実現したいこと

vue3を学習していて親コンポーネントから子コンポーネントにデータを渡したい

発生している問題・分からないこと

ブラウザでF12を押すと下記の「uncaught (in promise) TypeError: $setup.props.data is undefined」が出ます。

エラーメッセージ

error
1uncaught (in promise) TypeError: $setup.props.data is undefined

該当のソースコード

http.ts
1import axios from 'axios';
2
3const http = axios.create({
4    baseURL: 'http://192.168.33.10',
5    withCredentials: true,
6})
7
8export default http
9

router.ts
1import { createRouter, createWebHistory } from "vue-router"
2import Group from './vue/Group.vue'
3import Board from './vue/Board.vue'
4import Thread from './vue/Thread.vue'
5
6const router = createRouter({
7    history: createWebHistory(),
8    routes: [
9        {
10            name: 'group',
11            path: '/',
12            component: Group,
13        },
14        {
15            name: 'board',
16            path: '/board/:id',
17            component: Board,
18            props: true
19        },
20        {
21            name: 'thread',
22            path: '/thread/:id',
23            component: Thread,
24            props: true
25        },
26    ]
27})
28
29export default router;

Thread.vue
1<template>
2    <Header></Header>
3    <ResponseList v-bind:data="data"></ResponseList>
4</template>
5
6<style lang="scss" scoped>
7</style>
8
9<script setup lang="ts">
10import { ref } from 'vue'
11
12import Header from './item/Header.vue'
13import ResponseList from './item/ResponseList.vue'
14import http from '../http'
15
16const props = defineProps({
17    id: Number
18});
19console.log(props.id)
20const data = ref<{value: any}>()
21
22const params = new URLSearchParams()
23params.append('id', (props.id ?? '').toString())
24http
25.post('/api/responses', params)
26.then(res => {
27    data.value = res.data
28})
29.catch(e => {
30    console.error(e)
31})
32
33</script>

ResponseList.vue
1<template>
2    <div class="inner_wrap">
3        <pre>{{ props.data!.thread.name }}</pre>
4        <div class="gname">{{ props.data!.thread.name }}</div>
5        <ul class="group">
6            <li v-for="(v, k) in props.data!.responses" v-bind:key="k" class="link">{{ v.message }}</li>
7        </ul>
8    </div>
9</template>
10
11<style lang="scss" scoped>
12div.gname {
13    font-size: 24px;
14    color: #333;
15    margin: 20px 0 10px 0;
16}
17li.link {
18    line-height: 1.3;
19    text-decoration: underline;
20    padding-right: 5px;
21    color: #333;
22}
23li.link:hover {
24    color: blue;
25}
26div.inner_wrap {
27    margin: 20px 10%;
28}
29</style>
30
31<script setup lang="ts">
32const props = defineProps({
33    data: Object,
34});
35console.log(props.data)
36</script>
37

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

googleでエラーメッセージを検索したりChatGPTに聞きましたが、
直接的な答えが得られませんでした

ログを見るとResponseList.vueの中にある「console.log(props.data)」ですが、
2回実行されているようで、1回目はundefined、親から渡された値が入っているようです。
親(Thread.vue)ではAPIで取得した値を渡すため、このような事象が起きるのでしょうか？

補足

勉強でLaravelとVue3で簡単な掲示板を作っています。
親コンポーネントがThread.vueで子コンポーネントがResponseList.vueになります
ブラウザのデバッガでエラーが出るのですが、表示はできている感じです。
よろしくお願いいたします。

行動規範の内容に同意します

回答1件

自己解決

v-ifで値が設定されたら表示するのようにしたら直りました。

vue
1<template>
2    <div class="inner_wrap">
3        <div class="gname">{{ props.data ? props.data!.thread.name : '' }}</div>
4        <ul class="group" **v-if="props.data"**>
5            <li v-for="(v, k) in props.data!.responses" v-bind:key="k" class="link">{{ v.message }}</li>
6        </ul>
7    </div>
8</template>
9
10<style lang="scss" scoped>
11div.gname {
12    font-size: 24px;
13    color: #333;
14    margin: 20px 0 10px 0;
15}
16li.link {
17    line-height: 1.3;
18    text-decoration: underline;
19    padding-right: 5px;
20    color: #333;
21}
22li.link:hover {
23    color: blue;
24}
25div.inner_wrap {
26    margin: 20px 10%;
27}
28</style>
29
30<script setup lang="ts">
31const props = defineProps({
32    data: Object,
33});
34// console.log(props.data)
35</script>
36