The catslide component is used for each of the five cat types I have. The component contains one prop(whichcattype), two functions (loadNextImage and slideshow), a template(responsible for the HTML layout of the component), and basic data.
This function is responsible for getting the data about each cat from the API. The function take the breedID (which is the prop that is passed each time the component is used). With the breedID, the function makes a GET request to the API and stores the first 10 cat images/data into an array. The function then calls the slideshow function.
The slideshow function allows a user to view the different images in the array. An iterator keeps track of the current image and increases when the function is called. If the iterator is greater than the length of the array, then it goes back to the first image. I also placed my code for accessing the traits of the cat (child friendly, dog friendly, etc.) in this function.
whichcattype is my only prop. I use this to pass which cat type I should search for using the API.
The catslide template sets up the layout that I use to display each cat type. While each has the same layout, the values and images change based on the whichcattype prop.
There is an array that saves the first 10 cat objects from the array.
I assigned a variable for each cat property (child friendly, dog friendly, etc.) and assigned them within the slideshow function. This way, I could change the value based on the cat and specific property. I called these variables within the template by using v-bind:style