How do i Fix api data not displaying with vue and axios - django

Question

I can't seem to load the data information on the html table from the api via using vue and axios
I am adding vue as my frontend to my rest api and i have called the api correctly using axios the problem i am having is there is no data shown but the loop displays the number of lines cos i have 3 entries and the table shows 3 empty spaces but no meaningful data and there's no console error please what ami i doing wrong ?
<div class="body">
<table class="table table-bordered table-striped table-hover dataTable ">
<thead>
<tr>
<th>Article Id </th>
<th>Title</th>
<th>Body</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Article Id </th>
<th>Title</th>
<th>Body</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</tfoot>
<tbody>
<tr v-for="article in articles" :key="article.article_id">
<td>{{ article.article_id }}</td>
<td>{{ article.article_title }}</td>
<td>{{ article.article_body }}</td>
<td><button #click="geArticle(article.article_id)" class="btn btn-round btn-primary">Edit</button></td>
<td><button #click="deleteArticle(article.article_id)" class="btn btn-round btn-danger">Delete</button></td>
<td></td>
</tr>
<script>
new Vue({
el: "#startapp",
data: {
articles: [],
// loading: false,
currentArticle: {},
message: null,
currentArticle: {},
newArticle: {'article_title': null, 'article_body': null}
},
mounted(){
this.getArticles();
},
methods: {
getArticles: function() {
axios({
method: 'get',
url: '/api/article'
}).then((response) => this.articles = response.data)
}
}
});
</script>
The data from the api is supposed to show the article_id, article_title and article_body but i get blank spaces and there is no error

Answer 1

One of the things that is likely to go wrong especially as there are no error messages showing is forgetting to run your json-server package. This should run simultaneously as your development tools.
First run:
npm run json
While the above is still running, open another terminal and run this:
npm run serve