Updating an array of Data in Vue JS - vue.js

Question

i'm trying to make a little DataTable in VueJS 2.0, and i've hit a bit of a roadblock, i'm making a call to a backend route to get some JSON from records in the Database, so far so good.
I want those records to populate an Array of GridData that i will later iterate through and display on my table.
The problem here is that it's not working...
Vue.http.post('/getData', data).then((response) => {
this.gridData = response.body;
});
I have my data setup as follows
data: () => {
return {
searchQuery: "",
columns: ['ID', 'Name', 'Campaign', 'Method', 'Limit Per Connection', 'Limit Per Day', 'Active', 'Successes', 'Failures', 'Last Ran'],
lastId: 0,
rowsPerPage: 10,
gridData: []
}
}
And my function that gets the data is called on the mounted hook
mounted() {
this.fetchData(this.lastId, this.rowsPerPage);
},
Am i doing anything wrong here?

Answer 1

You are using POST HTTP Request, instead of GET.POST is for creating new records in API/DB.
I think this should work for you
data() {
return {
searchQuery: "",
columns: ['ID', 'Name', 'Campaign', 'Method', 'Limit Per Connection', 'Limit Per Day', 'Active', 'Successes', 'Failures', 'Last Ran'],
lastId: 0,
rowsPerPage: 10,
gridData: []
}
},
created() {
this.fetchData()
},
methods: {
fetchData() {
this.$http.get('/getData')
.then(result => {
this.gridData = result.data
// or this.gridData = result.json()
})
}
}