Solution: Utilizing the API Layer
Here’s the solution of utilizing the API layer challenge.
We'll cover the following
Solution
The challenge required you to add a new api file with a method to fetch a list of users. This method should have been imported and used in the DisplayUsers
component to fetch and render the users. Below are the required changes:
For the src/api/userApi.js
file:
- Import the
api
object from the baseapi.js
file and export thefetchUsers
method that fetches a list of users from the jsonplaceholder.typicode.com/users.
For the src/components/DisplayUsers.vue
file:
- Import the
fetchUsers
method fromapi/userApi.js
file. - Add a state to store an array of users.
- Create a new method called
initFetchUsers
that utilizes thefetchUsers
function to fetch users and set them on the state. - Initialize the
initFetchUsers
in thecreated
lifecycle hook.
Let’s run the following code to understand how the above solution works.
Note: The code below may take a while to run. When the server starts, go to the app URL and see the output.
Get hands-on with 1200+ tech skills courses.