fetch data for vue.JS datatable on API rest with ajax - vuejs2

Question

I new in Vue.JS development. I try to use this with an PHP Symfony API for fetching data. I'm added a Vuetify element datatable. Datable in API run perfeclty separatly but I don't display in my datatable the data precedently fetched by ajax in mounted function (and created function) vue.
new Vue({
el: '#app',
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Sodium (mg)', value: 'sodium' },
{ text: 'Calcium (%)', value: 'calcium' },
{ text: 'Iron (%)', value: 'iron' }
],
Items: [
]
}
},
mounted: function () {
console.log('egerg');
alert('gregee');
let self = this;
$.ajax({
url: 'http://xxx.xxx/api/operation/1',
method: 'GET',
success: function (data) {
alert('fzefzef');
// self.Items = data;
self.Items = [{
value: false,
name: 'Lollipop',
calories: 392,
fat: 0.2,
carbs: 98,
protein: 0,
sodium: 38,
calcium: '0%',
iron: '2%'
}];
},
error: function (error) {
alert(JSON.stringify(error));
}
});
}
})
Ajax function return good data but I can't populate my datatable with those.
I try to set manually data but result is same.
How can populate my vue with data (ajax or not) ?

Answer 1

I'm assuming you are using ES2015 because you are using the word "let".
try renaming Items to items (JS convention)
and then just copy the items and push them to your array:
new Vue({
el: '#app',
data () {
return {
headers: [
{
text: 'Dessert (100g serving)',
align: 'left',
sortable: false,
value: 'name'
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Sodium (mg)', value: 'sodium' },
{ text: 'Calcium (%)', value: 'calcium' },
{ text: 'Iron (%)', value: 'iron' }
],
Items: [
]
}
},
mounted: function () {
this.getData();
},
,methods:{
getData(){
let self = this;
$.ajax({
url: 'http://xxx.xxx/api/operation/1',
method: 'GET',
success: function (data) {
self.loadSuccess(data)
},
error: function (error) {
self.loadError(error)
}
});
},
loadSuccess(data){
var all= data.map(obj =>{
let clone ={...obj};
return clone;
});
self.items = all;
},
loadError(error){
alert(JSON.stringify(error));
}
}
})