0

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.

3
  • You need to use websocket. See this Commented Nov 28, 2019 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 Commented Nov 28, 2019 at 15:34
  • what url does it call in the network tab? Commented Nov 28, 2019 at 17:35

1 Answer 1

2

replace this

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

with this

  axios.get("api/user").then(({data}) => (this.users = data));
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.