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

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

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

方法1 在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>

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

方法2 或者，我也尝试使用作为道具传递的数据构建一个组件，以解决被动问题，但仍然不起作用。 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>

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

实例创建与上面相同

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>

{{itemslist}}
@{{props.item.name}
@{{props.item.carries}\
@{{props.item.fat}\
@{{props.item.carbs}\
@{{props.item.protein}\
@{{props.item.iron}\
导出默认值{
道具：{
itemslist:数组
}
}

---

我该如何继续？

我找到了问题的解决方案。这是一个相当愚蠢的错误。因此，为了以防万一，任何人再次面对它，我决定回答它

---

问题是我注册了一个新的根组件来显示app.js文件中的项目。而且，要使Vuetify组件正常工作，必须将它们包装在

中。所以我把组件放在一个文件中，现在它工作得很好。

在AJAX请求之后，itemslist包含什么？在方法1中，为什么要记录

console.log（self.\u data）

？您应该记录

console.log（self.itemslist）方法2中的甜点是什么？应该是
？@ittus谢谢你指出了这个错误。发布问题时出错，实际代码包含正确的值。@ittus我也这么做了。它给出了正确的值。我记录了整个_数据，只是为了检查是否有两个使用相同名称itemslist创建的数据