`I recently started working with Vue and have encountered a problem. The main parent component on this page is as follows, with 2 child components. The structure is like this {CURRENT PAGE..} > {FancyButton} > {AnotherViewChild} I am trying to pass a value from the current parent component to the grandchild AnotherViewChild component using provide and inject. It works fine with the code below, but if I introduce a setTimeOut delay to retrieve the message, I end up with an empty [] value.
How can I resolve this issue? This usually happens when handling large data from the backend. The sample message data looks like this: message.value = [{id: 1, name: "ddl"},{id: 2, name: "Omen ser"},{id: 3, name: "natural sea"},...]
<script setup lang="ts">
import { ref, provide, computed, onMounted } from 'vue'
import FancyButton from './FancyButton.vue'
let someValue: any[]
const message = ref<any[]>([])
message.value = [
{id: 1, name: "ddl"},
{id: 2, name: "Omen ser"},
{id: 3, name: "natural sea"},
{id: 4, name: "Whale is swiming"},
{id: 5, name: "Best food in"},
{id: 6, name: "Better choice"},
{id: 7, name: "What is next?"},
{id: 8, name: "Other Option"},
]
someValue = []
onMounted(() => {
setTimeout(() => {
message.value = [
{id: 1, name: "ddl"},
{id: 2, name: "Omen ser"},
{id: 3, name: "natural sea"},
{id: 4, name: "Whale is swiming"},
{id: 5, name: "Best food in"},
{id: 6, name: "Better choice"},
{id: 7, name: "What is next?"},
{id: 8, name: "Other Option"},
]
}, 2000)
})
console.log('-------->', message.value)
provide('message', message.value)
computed(() => {
console.log('-------->', someValue)
})
</script>
<template>
<div style="border: 1px solid purple">
<FancyButton>
<AnotherViewChild />
<div class="role">Role</div>
<div class="role">Role</div>
</FancyButton>
</div>
</template>
<style scoped>
.role {
color:green
}
.read-the-docs {
color: #888;
}
</style>
When using setTimeout, I expect the data to be available in message.value after the specified timeframe and to be displayed in my child component <AnotherViewChild /> using provide and inject. Assistance would be appreciated.