【问题标题】：How to populate the v-data-table after an AJAX request to fetch the data using Vuetify in Laravel?如何在 AJAX 请求后填充 v-data-table 以在 Laravel 中使用 Vuetify 获取数据？
【发布时间】：2018-05-15 02:28:03
【问题描述】：

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

方法一

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

在 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);
            });
        }
    }
});

方法二

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

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

在 app.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>

我应该怎么做？

【问题讨论】：

AJAX请求后itemslist包含什么？
在方法 1 中为什么要记录 console.log(self._data)？你应该登录console.log(self.itemslist);
方法 2 中的 desserts 是什么？应该是<grid : itemslist ="desserts"> </grid>？
@ittus 感谢您指出该错误。发布问题时出错，实际代码包含正确的值。
@ittus 我也这样做了。它给出了正确的值。我正在记录整个 _data 只是为了检查是否有两个具有相同名称的数据 itemslist

标签： ajax laravel vue.js vuetify.js

【解决方案1】：

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

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

【讨论】：