Curious Inquiry
What could be the missing link or error in my coding that prevents a simple joke from displaying in my project?
Check out my work-in-progress demo on codepen
Example JSON response
https://i.sstatic.net/xe9Qc.png
HTML Structure
<div class="jokes" v-for="joke in jokes">
<h2>{{ joke.setup }}</h2>
<p>{{ joke.line }}</p>
</div>
JS Implementation with Babel
new Vue({
el: '#app',
data:{
jokes: []
},
created(){
this.GetJokes();
},
methods: {
GetJokes () {
axios.get('https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random_joke')
.then(response => {
let joke = response.data[0];
let apiInfo = {
setup: joke.setup,
line: joke.punchline
};
this.jokes.push(apiInfo)
})
}
}
})