Experimenting with vueJS and rapidapi led me to a challenge: displaying data from an API using vue and the JS Fetch method. Unfortunately, all I could see when running the code was the initial value ([]).
<template>
<div>
<div>{{ chuckData }}</div>
</div>
</template>
<script>
var chuck = [];
fetch("https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random", {
method: "GET",
headers: {
"x-rapidapi-host": "matchilling-chuck-norris-jokes-v1.p.rapidapi.com",
"x-rapidapi-key": "***"
}
})
.then(response => response.json()) // Accessing actual response data
.then(data => {
chuck = data;
})
.catch(err => {
console.log(err);
});
export default {
data() {
return {
chuckData: chuck
};
}
};
</script>
Another attempt was made:
var chuck fetch("https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random", {...}
However, the outcome was [object Promise] instead of the intended data for display.
What steps should be taken to rectify this issue?