How to populate a Vuetify DataTable with axios - vue.js

Question

i don't know why my tables are not populated with axios, this is my DataTable template, like the documentation:
<v-data-table
:headers="headers"
:items="items"
hide-actions
class="slideInDown"
>
<template slot="items" slot-scope="props">
<td>{{ props.item.nombre }}</td>
<td class="text-xs-right">{{ props.item.calle }}</td>
<td class="text-xs-right">{{ props.item.numExterior }}</td>
<td class="text-xs-right">{{ props.item.numInterior }}</td>
<td class="text-xs-right">{{ props.item.codigoPostal }}</td>
</template>
</v-data-table>
And this is my script:
<script>
export default {
data () {
return {
items: [
{
nombre: "",
calle: "",
numExterior: "",
numInterior:"",
codigoPostal: "",
}
],
}
},
methods:{
}
created(){
axios.get('http://localhost:58209/api/GetEstaciones',
{
headers:
{
"Authorization": "Bearer "+localStorage.getItem('token')
}
}).then(response => {
this.items = response.data;
}).catch(error => {
console.log(error.response)
});
},
mounted(){
let token = localStorage.getItem('token');
if(token == null){
this.$router.push('/');
}
},
}
</script>
But the table is not populated, and when i debugging my WebAPI in Visual Studio it's working the Get method even with Postman. In my script i omit the heders[], i only show the items.
In Postman shows like this:
"calle": "AVENIDA BLA",
"numExterior": 121,
"numInterior": 2,
"codigoPostal": 123456,
"nombre": "ASDFGGHJKL"

Answer 1

You have to use the mounted :
chk the source code of this page ( click on ok with login you with the default demo account ... )
this example has the additional logic for server side paging and replacing the url params to the back-end , but it might help you grasp the events flow better ...
Short answer ( no error handling, no paging etc. ) :
const vm = new Vue({
el: '#app',
data: {
monthly_issues: []
},
mounted() {
// this is the url of the back-end spitting out json
axios.get("/tst_issue_tracker/select/monthly_issues")
.then(response => {this.monthly_issues = response.data.dat
})
}
})
Long answer:
mounted() {
var url_params = {}
if( window.location.toString().indexOf("?") != -1) {
window.location.search.split('?')[1].replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
url_params[decodeURIComponent(key)] = decodeURIComponent(value);
});
} else {
url_params = { as:"lbls" };
}
this.UrlParams = url_params;
axios.get((window.location.pathname).replace("/list/" , "/select/") , { params: url_params } )
.then(response => {
this.gridData = response.data.dat ;
this.pageSize = url_params['page-size'] || 10 ;
this.pageNum = url_params['page-num'] || 1 ;
var totalRSsize = response.data.met ;
var remainder = totalRSsize % this.pageSize
var toAdd = 1 // page-size 10 , total-rs-size 30 => 3 and not 4
if ( remainder == 0 ) { toAdd = 0 }
this.pagesCount = Math.floor(totalRSsize/this.pageSize ) + toAdd
})
.catch(function(error) {
document.getElementById("div_msg").innerHTML="<span id=\"spn_err_msg\">" + error.response.data.msg + '</span>'
})
}