[Vuejs]-How do I make a variable available to a grandchild component in this Vue 3 application?

3👍

First of all, if it is just avoiding your error in the MyDropDown grandchild component you can just add a ? after the usersData variable like v-if="usersData?.length". This will remove your Can't read length of undefined error.

Next is the way you’re trying to pass your props from parent to the child component. You are passing your users data to usersData prop of the Filters component tag but are trying to get the props as filterData in the component, which will not work as expected. So users is considered with an undefined value and is being the same into your grandchild which is causing an error in your grandchild i.e. MyDropDown component.

Try mapping the prop names properly and avoid variable name repetition with that of the prop names inside any component.

If you are trying to send data from parent to grandchild directly you use the Provide/Inject feature of Vue.js.
Find more about it here Provide/Inject | Vue.js

0👍

v-if="usersData?.length > 0"

try this
or

v-if="usersData.length > 0"
👤Gev99

Leave a comment