vue.js 如何显示后台数据?

vxf3dgd4  于 2023-05-01  发布在  Vue.js
关注(0)|答案(1)|浏览(196)

我学习使用axios,我想显示所有的客户名称。我使用Laravel 9和Vue 3。这是我在列表中的代码。vue组件。我的问题是这段代码什么都不显示。有人能帮我做错事吗?罗耶是肯定正确的,在我的后端控制器,这是我的代码。

public function index()
    {
        $customers = $this->service->getList();
        $response = [
            'data' => $customers
        ];
        return response()->json($response);
    }
<template>
    <table>
        <tr>
            <th>Name</th>
        </tr>
        <tr>
            <td>{{ clients.name }}</td>
        </tr>
    </table>
    </template>

<script>
export default {
    name: "List",
    data() {
        return {
            clients: null
        }
    },
    mounted() {
        axios
            .get('/clients')
            .then(response => (
                this.clients = response.data.clients
            ))
    }
}
</script>
shstlldc

shstlldc1#

看起来clients当前是一个数组,您应该循环遍历数组并显示每个客户端的名称,如下所示。

<template>
    <table>
        <tr>
            <th>Name</th>
        </tr>
        <tr for"client in clients" :key="client.id">
            <td>{{ client.name }}</td>
        </tr>
    </table>
</template>

相关问题