I am working on a Vue 3 app. I have run into a problem working with a parent component, a child component and a grandchild component.
In Main.vue (parent compenent):
<template>
<div class="main">
<h1>{{ title }}</h1>
<Filters
:usersData='users'
/>
</div>
</template>
<script>
import Filters from './Ui/Filters'
export default {
name: 'Posts',
components: {
Filters
},
props: {
title: String,
},
}
</script>
In the child compenent Filters.vue:
<template>
<label>Filter by author</label>
<MyDropdown
label="All authors"
:usersData='users'
/>
</template>
<script>
import MyDropdown from './MyDropdown'
import MyButton from './MyButton'
export default {
name: 'Filters',
components: {
MyDropdown,
MyButton
},
props: {
usersData: Object
},
data() {
return {
url: 'https://jsonplaceholder.typicode.com',
users: [],
}
},
async mounted() {
// Users
await this.axios.get(`${this.url}/users`).then((response) => {
if (response.status == 200) {
this.users = response.data;
console.log(this.users); // outputs the users correctly
}
}).catch((errors) => {
console.log(errors);
});
}
}
</script>
Tn the grandchild component MyDropdown.vue:
<template>
<div class="dropdown">
<button type="button" class="btn btn-sm dropdown-toggle" data-bs-toggle="dropdown">
{{ label }}
</button>
<ul v-if="usersData.length" class="dropdown-menu">
<li><a class="dropdown-item" href="#">Jane Doe</a></li>
<li><a class="dropdown-item" href="#">John Doe</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'MyDropdown',
props: {
label: String,
usersData: Object
}
}
</script>
As long as v-if="usersData.length is present, I get this error in the console:
Cannot read properties of undefined (reading 'length')
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
v-if="usersData?.length > 0"
try this or
v-if="usersData.length > 0"