Laravel中使用Vuetify通过AJAX填充v-data-table的问题求助

让我来帮你搞定这个头疼的问题——控制台显示数据已经更新，但表格就是不渲染，这种情况大多和Vuetify组件的使用细节、Vue响应式规则或者模板语法错误有关，咱们一步步来排查修复：

先看方法1的核心问题 #

你在方法1里犯了一个Vuetify插槽的常见错误：v-data-table的行插槽名称是item，不是items！这直接导致你的自定义模板根本没被正确渲染，哪怕数据更新了也没用。另外，咱们可以优化一下数组赋值的方式，确保触发Vue的响应式更新。

修正后的方法1代码 #

home.blade.php

<div id="items-display-table">
    @{{itemslist}}
    <v-data-table :items="itemslist" class="elevation-1" hide-actions hide-headers >
        <!-- 把slot="items"改成slot="item"，这是Vuetify行插槽的正确名称 -->
        <template slot="item" 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 () {
            // 用bind(this)代替self，写法更简洁
            axios.get('/api/cards')
                .then(function(response) {
                    // 用扩展运算符重新生成数组，确保触发Vue的响应式更新
                    this.itemslist = [...response.data];
                    console.log('更新后的数据:', this.itemslist);
                }.bind(this))
                // 加上错误捕获，方便排查API请求问题
                .catch(function(error) {
                    console.error('API请求失败:', error);
                });
        }
    }
});

再看方法2的核心问题 #

方法2的问题有两个：

1. Vue组件模板只能有一个根元素：你的DataTable.vue里直接放了<div>{{itemslist}}</div>和<v-data-table>两个根元素，这会导致Vue编译出错，组件无法正常工作。
2. 同样犯了插槽名称错误的问题，还是把items改成item。

修正后的方法2代码 #

DataTable.vue

<template>
    <!-- 把所有内容包裹在一个根div里，符合Vue组件的模板规则 -->
    <div>
        <div>{{itemslist}}</div>
        <v-data-table :items="itemslist" class="elevation-1" hide-actions hide-headers >
            <template slot="item" 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>
</template>
<script>
export default {
    props: {
        itemslist: {
            type: Array,
            // 给一个默认空数组，避免props未传递时的报错
            default: () => []
        }
    }
}
</script>

app.js（补充完整父实例代码）

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

// 别忘了定义父Vue实例，负责请求数据并传递给子组件
new Vue({
    el: '#cards-display-table',
    data: {
        itemslist: []
    },
    created() {
        this.fetchData();
    },
    methods: {
        fetchData() {
            axios.get('/api/cards')
                .then(response => {
                    this.itemslist = [...response.data];
                })
                .catch(error => {
                    console.error('API请求失败:', error);
                });
        }
    }
});

额外排查步骤 #

如果修正后还是不行，你可以做这几件事：

1. 检查浏览器控制台的报错：Vue的编译错误、Vuetify的警告信息都会告诉你问题出在哪，别忽略这些提示。
2. 验证API返回的数据格式：直接在浏览器地址栏访问/api/cards，确认返回的是一个数组，并且每个元素都包含name、calories等你用到的字段。
3. 适配Vuetify版本：如果你用的是Vuetify 3.x，插槽语法要改成v-slot:item="{ item }"，比如：

<template v-slot:item="{ item }">
    <td>{{ item.name }}</td>
    <!-- 其他列内容 -->
</template>

内容的提问来源于stack exchange，提问作者Lav Shinde