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:

For the src/components/DisplayUsers.vue file:

  • Import the fetchUsers method from api/userApi.js file.
  • Add a state to store an array of users.
  • Create a new method called initFetchUsers that utilizes the fetchUsers function to fetch users and set them on the state.
  • Initialize the initFetchUsers in the created 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.