As a beginner in Vue Js, I am currently encountering an issue with my project. I am utilizing Axios to retrieve user data from the JSON placeholder API. This data is being fetched in the Sidebar component through Vuex getters. Within the Sidebar component, there is a child component named User which is dynamically created for each user in a loop.
Despite passing user data to the User component via props within the loop, I am facing errors while accessing these props. Here is the specific error message:
https://i.sstatic.net/8M6Y0.png
Below is a snippet of my code for reference:
Sidebar.vue- `
<template>
<div class="sidebar">
<div class="sidebar__info">
<p class="sidebar__title">Search Users</p>
<input class="sidebar__input"/>
<p class="results">Results</p>
<div class="results__info" v-for="user in allUsers" :key="user.id" >
<User :users="user"/>
</div>
</div>
</div>
</template>
... (continued)
For further details, you can refer to the complete code provided above and the relevant screenshots attached below. Any assistance or guidance on debugging this issue would be greatly appreciated!
https://i.sstatic.net/iL2PO.png