Within my Vue.js component, I am utilizing axios to fetch a JSON array consisting of `joke` objects:
<template>
<div id="show-jokes-all">
<h2>Showing all jokes</h2>
<div v-for="joke in jokes">
<h2>{{joke.title}}</h2>
<article>{{joke.body}}</article>
<hr>
</div>
</div;
</template>
<script>
import axios from 'axios';
export default {
name: 'showJokes',
data () {
return {
jokes:[]
}
},
methods: {
},
created() {
axios.get('http://127.0.0.1:8090/api/jokes).then(function(data){
//console.log(data); works fine
this.jokes = data.body;
});
}
}
</script>
Although the result is correctly logged in the console, attempting to store it in the `jokes` array results in:
Uncaught (in promise) TypeError: Cannot set property 'jokes' of undefined
As a newcomer to Vue.js, I'm struggling with this seemingly simple error. Any assistance would be greatly appreciated.