The loadNextImage function is used to get information about cats by requesting it from the cat API. The data that is extracted will depend on the breedID that is used as an argument in the URL. Afterward, it stores the first 10 images of that cat into an array.
The slideshow function allows the user to view and cycle through the 10 images that were stored in the array. With the variable i, the function is able to locate the current position in the array. Each time the 'Next Image' button is pressed it will move one index forward in the array. Thus, the image at that index is shown. If it reaches the end of the array, the next image will be the image at the first index.
The name of the vue component is cat. It has a prop called type, which stores a string (the breed of the cat). This can be used to search in the API and get information on that paricular breed. The HTML portion is found in the template. The component also includes the two functions, slideshow and loadNextImage. The overall purpose of a component is to boost efficiency and prevent repetition in code. Information extracted from the API may be different depending on the breed, but each component will have the same elements, layout, style, and functions.