fetch() function is not working in methods - laravel

Question

I am trying to retrieve data from REST API. I got below code from a tutorial which are not working in my machine but working in that video.
<template>
<div>
<h2>Articles</h2>
<div class="card mb-2" v-for="article in articles" v-bind:key="article.id">
<div class="card-header">
{{ article.title }}
</div>
<div class="card-body">
{{ article.body }}
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
articles : [],
article : {
id : '',
title : '',
body : ''
},
article_id : '',
pagination : {},
edit : false
}
},
created(){
this.fetchArticles();
},
methods:{
fetchArticles(){
fetch('api/articles')
.then(res => res.json())
.then(res => {
this.arcticles = res.data;
console.log(res.data);
})
}
}
}
</script>
After few research I changed my code to
<template>
<div>
<h2>Articles</h2>
<div class="card mb-2" v-for="article in articles" v-bind:key="article.id">
<div class="card-header">
{{ article.title }}
</div>
<div class="card-body">
{{ article.body }}
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
articles : [],
article : {
id : '',
title : '',
body : ''
},
article_id : '',
pagination : {},
edit : false
}
},
created(){
axios
.get('api/articles')
.then(res => {
this.articles = res.data.data;
console.log(res.data.data);
})
},
}
</script>
and it's working fine.
I want to fix the previous code (from the tutorial). Otherwise I'll not get further lessons.

Answer 1

From MDN documentation, the json() method is implemented on Response body, and it returns a promise wich resolves to result of parsing the body text as json.
response.json().then(data => {
// do something with your data
});
So, when using in fetch, the correct syntax is:
fetchArticles(){
fetch('api/articles')
.then(res => res.json())
.then(data=> {
this.arcticles = data; // the result here contains only the json data, it is not a response object, so it does not have a 'data' property.
console.log(data);
})
}