如何在 AJAX 请求后填充 v-data-table 以在 Laravel 中使用 Vuetify 获取数据?

Question

将VueJS与Vuetify和Laravel框架一起使用。尝试了许多不同的 AJAX 方法和定义组件，但没有任何效果。似乎在进行 ajax 调用时，变量会更新，我在控制台中检查了.log，但它没有反映在 DOM 中。 我目前的代码如下

方法 1

在家里.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>

在应用程序中.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);
});
}
}
});

方法 2

或者，我也尝试使用作为道具传递的数据构建一个组件来解决反应性问题，但它仍然不起作用。 其代码在 home.blade 中如下所示.php

<div id="cards-display-table">
<grid
:itemslist="itemslist">
</grid>
</div>

在应用程序中.js

Vue.component('grid', require('./components/DataTable.vue'));

并且实例创建与上面相同。

DataTable.vue 文件中的代码如下所示

<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>

我应该如何进行？

Answer 1

我找到了我的问题的解决方案。这是一个非常愚蠢的错误。所以以防万一，有人再次面对它，我决定回答它。

问题是我正在注册一个新的根组件以显示应用程序.js文件中的项目。并且明确提到，要使Vuetify组件正常工作，必须将它们包裹在<v-app>中。所以我把组件放在一个文件中，现在它工作得很好。