Я загружаю асинхронно данные в родительском компоненте, и передаю props в дочерний, но он undefined потому-что не успевает получить данные, как это исправить?
Родительский компонетн:
<template>
<div class="main">
<TheHeader :user="room.user"/>
<!-- <div class="container-main"> -->
<!-- <div class="default-text">
<h4>Select chat to start messaging</h4>
</div> -->
<!-- <main class="messages"> -->
<!-- </main>
<message-input/>
</div> -->
</div>
</template>
<script>
import TheMessageInput from './UI/TheMessageInput.vue';
import TheHeader from './TheHeader.vue'
export default {
components: {
TheMessageInput,
TheHeader
},
data() {
return {
room: {}
}
},
methods: {
async getRoom() {
this.room = await this.$store.dispatch('chat/getRoom', this.$route.params.id);
}
},
async mounted() {
await this.getRoom();
}
}
</script>
Дочерний компонент:
<template>
<div class="header">
<div class="container">
<div class="chat-info">
<img src="https://c4.wallpaperflare.com/wallpaper/471/317/70/chainsaw-man-scars-red-eyes-looking-at-viewer-yoru-hd-wallpaper-preview.jpg" alt="avatar">
<!-- <img :src="`http://localhost:8000/${user.avatar}.png`" alt="avatar"> -->
<div class="user-info">
<p class="user-username">john</p>
<p class="user-status">online</p>
</div>
</div>
<div class="actions">
<i class="bi bi-search"></i>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
user: {
type: Object,
required: true
}
},
mounted() {
console.log(this.user)
}
}
</script>
