如何将数据从 laravel 控制器发送到 vuejs

Posted 2023-02-16

【中文标题】如何将数据从 laravel 控制器发送到 vuejs

【英文标题】：How to send data from laravel controller to vuejs

【发布时间】：2019-11-28 15:12:43

【问题描述】：

如何将数据从 Laravel 控制器发送到 vue？我已经设置了我认为它可能工作的方式，但没有发送数据。我做错了什么？ 控制器（设置在单独的 API 文件夹中）：

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

来自 api.php 的路由：

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

组件代码：

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

我只是在上面放了一个简单的列表来测试数组，但它只是空白。

【问题讨论】：

你需要使用websocket。见this

你是从 vue js 指向那条路线的吗？将简单的dd() 添加到您的index() 如果您没有从dd() 获取数据，您可能需要使用集合

在网络标签中调用了什么url？

【参考方案1】：

替换这个

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

有了这个

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