****I'm still trying to figure out how to add chart.js**

Health Issues

How this works

I first began by transferring all of my data from the Vue instance, "bobcat" into a new component, "cats." Then I created the template of my component and added the necessary HTML elements needed to create each div per breed. I added a property called "whichcat" to the component so I can dynamically change the breed ID for each cat element. I also used class binding within the h4 that contains the energy levels of each breed – I have it set so that if energy_level > 2, the text will be red (or green if it's < 2). The data within the component helps insert the new values after loadNextImage() is called.

Next, the function create() then calls loadNextImage() and uses whichcat as a parameter to pass through. This lets the component know that it's time to create the next div containing a new breed. Lastly, the methods section of the componenet declares loadNextImage(). Within this function, we use axios to pull a JSON object from the cat API. We add "breedID" at the end of the URL within the beginning of loadNextImage() in order to load each object of a corresponding breed (i.e., whichcat = "abob" loads the bobcat object, whichcat = "abys" loads the Abyssinian object, and so on). After the data is pulled via axios, we then redefine the empty array, allofit, to response.data and call it. Next, we use catchto throw an error if something goes wrong when collecting the new data.

Now we create the slideshow() function. This first uses a conditional if statement to output the first element of the response.data array. Then we call this.image = this.allofit[this.i] to cycle through and output each image element gathered from the array.