How to display records from Laravel via Vuetify v-data-table component

Question

I have a project build in Laravel with Vue.js which work perfect statically, but I need convert it into dynamically to pull records from database table to v-data-table component. I know Laravel and I know How these things works via Ajax/jQuery but I'm pretty new in Vue.js

Can someone explain to me how to display the results from the database in the v-data-table component. Thanks. Here is the Vue.js file:

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

And Here is Blade file:

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

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

Output in the console is : console.log

Response from axios is also Ok

response

My Controller :

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

My route:

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

console.log after changes axios lines console-log

What happens when you change `response => this.items = response.data,` to `this.items = response.data`? — Maarten Veerman, Oct 22 '20 at 19:58
Wait a second, your response is incorrect. Your server returns an object called `items`, while it should return an array of items. Show the response code in your laravel controller. — Maarten Veerman, Oct 22 '20 at 20:01
I can easily change the response in the controller, I'm just interested in how to display the response from the controller in the vuetify datatable component. — P. Ivan, Oct 23 '20 at 06:17
I put it in the controller to return any output so i can see it in response. I will adapt it to the needs of the application on the server side later and that's not problem. I just need to understand how to display this response from controler into v-data-table component. — P. Ivan, Oct 23 '20 at 06:24
The point is, your display code is correct, but your backend returns 1 object which your frontend cannot handle. Your backend should return an array of objects. — Maarten Veerman, Oct 23 '20 at 06:58
Yes, that's beter. Now in your axios call change `post` to `get` to match your route definition. And make sure to make the adjustment from my first comment. Let me know if it works. — Maarten Veerman, Oct 23 '20 at 12:27
Thank you Maarten. I changed axios call from post to get and I made adjustment regards to your first comment but still no luck — P. Ivan, Oct 23 '20 at 12:58
When I change response => this.items = response.data to this.items = response.data I get error in console: TypeError: Cannot set property 'items' of undefined at app.js:2509, But I defined in data object like so items: [] — P. Ivan, Oct 23 '20 at 13:06

score 0 · Answer 1 · answered Oct 23 '20 at 14:57

0

So there were multiple issues here:

The backend did you return a correct array
The frontend performed a post request instead of a get
The this context is not correct since you are using a function instead of arrow syntax

Make sure to look at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions and read about how this changes how this is elevated.

In your case, you need to change the code on the then part of your axios call:

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

answered Oct 23 '20 at 14:57

Maarten Veerman

1,546
1
8
10

I guess I have issues on the frontend side. When I modify lines of code in axios, console.log gives me an object instead of array and after that error says that prop type expected array got object. I will modify again my question with code which I have modified. – P. Ivan Oct 23 '20 at 16:18
But now suddenly you have a `first ()` call in your eloquent query, this should be `get()`. You could have spotted that since again your console shows that `items` is an object instead of an array of objects, which is also the reason why vuetify throws the error. – Maarten Veerman Oct 23 '20 at 19:15
Backend is fine. I was just testing this. Does not work with either first () or get () – P. Ivan Oct 23 '20 at 19:29
I can change the question again if necessary with modified code but I only changed those lines in axios which you told me and test it with get() and first() in controller but either doesn't work – P. Ivan Oct 23 '20 at 19:33
And Console show items as a object when I modify axios lines from response => this.items = response.data to this.items = response.data, but if I leave it as it was then it shows an array whether it is in the controller get() or first() Eloquent query – P. Ivan Oct 23 '20 at 19:38

score 0 · Answer 2 · answered Oct 24 '20 at 06:06

I must to say that I solve the problem. Problem was been in axios response. Instead this.items = response.data I change to this.items = response.data.items and it work perfectly.

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

        },
    }

How to display records from Laravel via Vuetify v-data-table component

2 Answers2