provide/inject: types arrive as undefined at child component

[Ghazal Nikmanesh]

Hi there,

using the quasar framework with vue 3, I am experincing the following issue:

Whenever I try to pass variavles/objects/arrays or whatever from a component to another, regardless of what methos I use (provide/inject and props in the 'script setup' mode or export in the 'script' mode), in the child component I get unknown or undefined when trying to print the received item to the console. What am I doing wrong? Thanks in advance! 

Here is a simple example:

parent component:

<script setup lang="ts">

import { provide } from 'vue'

const nums = [1, 2]

provide(nums, 'numbers')

</script>

child component:

<script setup lang="ts">

const numbers = inject('nums')

console.log(numbers)

</script>

[Deepika Arumugasamy]

Hi Ghazal Nikmanesh,

Thank you for your patience. We would like to inform you that the provide() function accepts the first argument as the injection key, which can be a string or a symbol. The second argument is the provided value. Additionally, we need to provide the injection key in the inject() function.

Please find the corrected code snippet below for your reference:

parent component:

<script setup lang="ts">

import { provide } from 'vue'

const nums = [1, 2]

provide('numbers', nums)

</script>

child component:

<script setup lang="ts">

const numbers = inject('numbers')

console.log(numbers)

</script>

Kindly find the below links for your reference.

https://vuejs.org/guide/components/provide-inject.html#provide

https://vuejs.org/guide/components/provide-inject.html#inject

If you require any further assistance or have additional questions, please feel free to let us know.

Regards,

Deepika.