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

Question

我有一个在 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>

这是刀片文件：

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

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

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

axios的响应也OK

我的控制器：

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 控制台日志

score 0 · Accepted Answer

所以这里有多个问题：

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

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

在您的情况下，您需要更改thenaxios 调用部分的代码：

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

score 0 · Accepted Answer

我必须说我解决了这个问题。问题出在 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))

        },
    }

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

2 回答 2

Related

Reference