How to populate the v-data-table after an AJAX request to fetch the data using Vuetify in Laravel? - ajax

Question

Using VueJS with Vuetify and in Laravel framework. Many different methods of AJAX and defining components were tried but nothing worked. It seems that when the ajax call is made, the variable is updated, which I checked in the console.log, but it is not reflected in the DOM.
My current code is as follows
Method 1
In the home.blade.php
<div id="items-display-table">
#{{itemslist}}
<v-data-table
:items="itemslist"
class="elevation-1"
hide-actions
hide-headers
>
<template slot="items" slot-scope="props">
<td>#{{ props.item.name }}</td>
<td class="text-xs-right">#{{ props.item.calories }}</td>
<td class="text-xs-right">#{{ props.item.fat }}</td>
<td class="text-xs-right">#{{ props.item.carbs }}</td>
<td class="text-xs-right">#{{ props.item.protein }}</td>
<td class="text-xs-right">#{{ props.item.iron }}</td>
</template>
</v-data-table>
</div>
And in the app.js
var itemsDisplayTable = new Vue({
el: '#items-display-table',
data: {
itemslist: []
},
created: function () {
this.fetchData();
},
methods: {
fetchData: function () {
var self = this;
var apiURL = '/api/cards';
axios.get( apiURL )
.then ( function( response ) {
data = response['data'];
// console.log(data);
self.itemslist = data;
console.log(self._data);
});
}
}
});
Method 2
Alternatively, I have also tried building a component with the data passed as a prop to solve the reactive issue but still it doesn't work.
The code for that is as follows in home.blade.php
<div id="cards-display-table">
<grid
:itemslist="itemslist">
</grid>
</div>
In app.js
Vue.component('grid', require('./components/DataTable.vue'));
And the instance creation is same as above.
The code in the DataTable.vue file is as follows
<template>
<div>{{itemslist}}</div>
<v-data-table
:items="itemslist"
class="elevation-1"
hide-actions
hide-headers
>
<template slot="items" slot-scope="props">
<td>#{{ props.item.name }}</td>
<td class="text-xs-right">#{{ props.item.calories }}</td>\
<td class="text-xs-right">#{{ props.item.fat }}</td>\
<td class="text-xs-right">#{{ props.item.carbs }}</td>\
<td class="text-xs-right">#{{ props.item.protein }}</td>\
<td class="text-xs-right">#{{ props.item.iron }}</td>\
</template>
</v-data-table>
</template>
<script>
export default {
props: {
itemslist: Array
}
}
</script>
How should i proceed?

Answer 1

I found a solution to my question. It was a pretty silly mistake. So just in case, anyone faces it again, I have decided to answer it.
The problem was that I was registering a new root component to display the items in the app.js file. And it is clearly mentioned that for the Vuetify components to work, they must be wrapped in the <v-app>. So I put the components in a single file and now it is working perfectly.