How to send data from laravel controller to vuejs

Question

How do I send data from Laravel Controller to vue? I have it set up how I thought it might work but no data is being sent. What have I done wrong? Controller(set in a separate API folder):

public function index()
    {
        return User::all();
    }

Route from api.php:

Route::apiResources([
    'user' => 'API\UsersController'
]);

Component code:

<template>
    <div>
        <v-toolbar flat color="white">
            <v-toolbar-title>Users</v-toolbar-title>
        </v-toolbar>
        <ol v-for="user in users">
            <li>Name: {{ user.name }}</li>
        </ol>
        <v-data-table
            :headers="headers"
            :items="users"
            :items-per-page="5"
            class="elevation-1"
            flat
        >
        </v-data-table>
    </div>
</template>

<script>
    import {AxiosInstance as axios} from "axios";

    export default {
        data () {
            return {
                headers: [
                    {
                        text: 'Username',
                        align: 'left',
                        value: 'username',
                    },
                    { text: 'Name', value: 'name' },
                    { text: 'Surname', value: 'surname' },
                    { text: 'Email', value: 'email' },

                ],
                users: [],
            }
        },
        methods: {
            loadUsers(){
                axios.get('./api/user').then(response => this.users = response.data);
            }
        },
        mounted() {
            this.loadUsers();
        }
    }
</script>

I just put a simple list up there to test the array but it just comes out blank.

You need to use websocket. See [this](https://stackoverflow.com/questions/33471695/simple-websocket-implementation-in-laravel-5) — Eldar, Nov 28 '19 at 15:17
Did you point that route from vue js? Add simple `dd()` to your `index()` if you doesn't get data from `dd()` you probably need to use collection — mare96, Nov 28 '19 at 15:34

score 2 · Answer 1 · answered Nov 30 '19 at 13:34

2

replace this

 axios.get('./api/user').then(response => this.users = response.data);

with this

  axios.get("api/user").then(({data}) => (this.users = data));

answered Nov 30 '19 at 13:34

Garry

2,256
2
11
14

How to send data from laravel controller to vuejs

1 Answers1