如何通过Vuetify v-data-table组件显示Laravel中的记录

问题描述

我在Laravel中使用Vue.js构建了一个项目，该项目可以静态完美地工作，但是我需要将其动态转换以将记录从数据库表提取到v-data-table组件。我知道Laravel，也知道这些东西如何通过Ajax / jQuery工作，但是在Vue.js中我还是很新的

有人可以向我解释如何在v-data-table组件中显示数据库的结果。谢谢。这是Vue.js文件：

<template>
    <v-app>
        <v-main>
            <div>
                <v-tab-item>
                    <v-card flat>
                        <v-card-text>
                            <v-card-title>
                                <v-spacer></v-spacer>
                                <v-text-field
                                    v-model="search"
                                    append-icon="mdi-magnify"
                                    label="Search"
                                    single-line
                                    hide-details
                                ></v-text-field>
                            </v-card-title>
                            <v-data-table
                                :headers="headers"
                                :items="items"
                                :items-per-page="5"
                                class=""
                                :search="search">
                            </v-data-table>
                        </v-card-text>
                    </v-card>
                </v-tab-item>
           </div>
        </v-main>
    </v-app>
</template>
<script>
export default {
    data: () => ({
            
            search: '',items: [],headers: [
            {
                text: '#',align: 'start',sortable: false,value: 'id',},{ text: 'Name',value: 'name' },{ text: 'Slug',value: 'slug' },],/*THIS IS A STATIC DATA*/

            // items: [
            //     {
            //         id: 1,//         name: 'Test Name 1',//         slug: 'test-name-1',//     },//     {
            //         id: 2,//         name: 'Test Name 2',//         slug: 'test-name-2',// ],/*THIS IS A STATIC DATA*/
    }),created () {
        this.getItems();
    },methods: {
        getItems() {
            axios
            .get('/test/vue')
            .then((response) => {
                this.items = response.data,console.log(response.data)
            })
            .catch(error => console.log(error))

        },}    
}
</script>

这是Blade文件：

@extends('it-pages.layout.vuetify')

@section('content')
<div id="appContainer">
    <software-template></software-template>
</div>

控制台中的输出为： console.log

axios的响应也可以

@L_502_1@

我的控制器：

public function showData()
{
    $items = Category::select('id','name','slug')->where('order',1)->get();
    // dd($items);
    return response()->json(['items' => $items]);
}

我的路线：

Route::get('test/vue','PagesController@showData');

更改axios行后的

console.log console-log

解决方法

所以这里有多个问题：

后端您是否返回了正确的数组
前端执行了post请求，而不是get
this上下文不正确，因为您使用的是function而不是arrow syntax

请务必查看https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions并了解如何改变this的提升方式。

对于您而言，您需要在axios调用的then部分更改代码：

.then((response) => {
    this.items = response.data
})

我必须说我解决了这个问题。问题出在axios响应中。相反，我将this.items = response.data更改为this.items = response.data.items，它可以正常工作。

methods: {
        getItems() {
            axios
            .get('/test/vue')
            .then((response) => {
                this.items = response.data.items
                console.log(response.data.items) 
            })
            .catch(error => console.log(error))

        },}