无法从控制器获取数据到 Vue 组件答案

【问题标题】：Unable to fetch data from controller to Vue Component无法从控制器获取数据到 Vue 组件
【发布时间】：2020-07-25 14:26:11
【问题描述】：

我正在尝试使用 laravel 中的控制器将数据从数据库获取到 vue 组件，但由于某种原因在屏幕上没有显示任何内容，
数据正在传递，没有错误可见
我唯一能看到的是 "li" 标记点，它比数据库中存在的条目要多得多

这是我得到的：-

控制器：-

class MyRequestController extends Controller
{
    public function MyRequest()
    {
        return User::all();
    }
}

Vue 组件：-

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        <ul>
                            <li v-for="user in users">{{users.email}}</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data()
        {
            return {
                users : []
            }
        },
        created() {
            axios.get('./userz')
            .then(response => this.users = response.data);
        }
    }
</script>

我仍在研究 laravel 中的 vue，所以如果你保持简单的答案真的会有所帮助。

调试
所做的更改：-

created() {
            axios.get('./userz')
            .then(response => this.users = response.data);
            console.log(this.users);

        }

输出：-

【问题讨论】：

评论不适用于扩展讨论或调试会话；这个对话是moved to chat。如果您被要求提供更多信息，请在问题中edit它（请勿在 cmets 中回复）。如果您对如何解决问题有任何建议，请发布答案。
是的，你做得对。这是一个莫名其妙的问题。当您在 li 标签中添加:key 时，刷新并计算点数。看看它们是否对应数据库中的数字。
@Tony 没有点不对应，输出仍然相同，调试已移至聊天框，如果您不介意，可以在那里回复
在<li v-for="user in users">{{users.email}}</li>这一行中将users.email更改为user.email。
@Aashishgaba 还是一样

标签： javascript laravel vue.js

【解决方案1】：

您需要以json的形式返回数据。因此，在您的控制器函数中，将用户作为 json 响应返回。

return response()->json(User::all());

【讨论】：