I am currently learning about API design and attempting to make an API call that retrieves data from an online API server using the vue.js project through CLI. While I can see the results in the browser console, I'm encountering issues with displaying the actual data on the webpage. I have researched similar problems but none seem to address the specific difficulties I am facing with Vue. Despite spending days looking into it, I haven't been able to pinpoint the problem. It's frustrating to admit defeat, especially when I suspect it may be a basic mistake causing the error. Here is the relevant code:
<template>
<div class="health">
<p>{{response}}</p>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "HelloHealth",
data() {
return {
response: ""
};
},
mounted() {
axios({
method: "GET",
url:
"https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random",
headers: {
"content-type": "application/octet-stream",
"x-rapidapi-host": "matchilling-chuck-norris-jokes-v1.p.rapidapi.com",
"x-rapidapi-key": "5788793819msh9c9b16c2298d826p1e5fefjsn3d5bde507db6",
accept: "application/json"
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log(error);
});
}
};
</script>
The console displays these results for the code:
https://i.sstatic.net/8jTnP.png
Could someone please assist me in identifying my mistake? Thank you for your help.