I'm currently working on a dad jokes generator project using Vuejs and integrating it with this API . However, I've encountered an issue where I'm receiving the same joke repeated in an array instead of just one unique joke. You can view the problem in this screenshot: . Additionally, I'm trying to implement a button that triggers the fetch function, but I've hit a roadblock while working with the axios library.
<script>
import axios from "axios";
export default {
name: "Jokes",
data() {
return {
jokes: []
};
},
methods: {},
created() {
axios
.get(
"https://us-central1-dadsofunny.cloudfunctions.net/DadJokes/random/jokes",
{
headers: {
Accept: "application/json"
},
params: {
limit: 1
}
}
)
.then(response => {
this.jokes = response.data;
console.log(response.data);
})
.catch(err => {
alert(err);
});
}
};
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<template>
<div id="jokes-card">
<div v-for="joke in jokes" :key="joke.id">
<p>{{jokes.setup}}</p>
<p>{{jokes.punchline}}</p>
</div>
</div>
</template>