How to pass data from axios response from parent to child in Vue

Question

I'm doing axios call on my view level (parent) and based on the data returned, I do assign it to ref() variable. Then I want to pass this variable as props to my child component.

parent

<template>
    <User_List :users="uniqueNames"/>
</template>


<script setup lang="ts">
import User_List from "@/components/User/User_list.vue"
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { api } from "@/api"
import { UserNameSurname } from "@/interfaces/user"
import { useNotification } from "@kyvg/vue3-notification";
import router from '@/router';

const { notify }  = useNotification()
const route = useRoute()
const uniqueNames = ref<UserNameSurname>([])

const get_unique_users = async (phrase: string) =>{
    await api
    .post("users/find_unique_users", {phrase: phrase})
    .then(response => {
        uniqueNames.value = response.data
    })
    .catch(error => {
        notify({
            title: "Błąd",
            text: error.response.data.detail,
            type: "warn",
            duration: 3000
        });
        router.push("/")
    })
}

onMounted(() => {
    const phrase = route.params.phrase
    get_unique_users(phrase)
})
</script>

child:

<template>
    <div>this is user list {{props.users}}</div>
</template>


<script setup lang="ts">
import { UserNameSurname } from '@/interfaces/user';
const props = defineProps<{users: UserNameSurname}>()
</script>

The problem is that my child component sees it as undefined . It looks like the component mounts before the actual call is made. How can i overcome it?

Answer 1

You may use a loading ref

<template>
    <div v-if="loading">Loading..</div>
    <User_List v-else :users="uniqueNames"/>
</template>


<script setup lang="ts">
import User_List from "@/components/User/User_list.vue"
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'
import { api } from "@/api"
import { UserNameSurname } from "@/interfaces/user"
import { useNotification } from "@kyvg/vue3-notification";
import router from '@/router';

const { notify }  = useNotification()
const route = useRoute()
const uniqueNames = ref<UserNameSurname>([])
const loading = ref(false)

const get_unique_users = async (phrase: string) =>{
    await api
    .post("users/find_unique_users", {phrase: phrase})
    .then(response => {
        uniqueNames.value = response.data
    })
    .catch(error => {
        notify({
            title: "Błąd",
            text: error.response.data.detail,
            type: "warn",
            duration: 3000
        });
        router.push("/")
    })
}

onMounted(async () => {
    loading.value = true;
    const phrase = route.params.phrase
    await get_unique_users(phrase)
    loading.value = false;
})
</script>

OR

You could also watch changes of the users prop in the child component