Question

VueDev工具显示axios get正在返回数据数组，但我无法显示数据。（显然我是新手）我错过了一步吗？

<template>
    <div  >
        <ul>
            <li v-for="dilo_role in dilo_roles"> {{ dilo_role.role }}</li>
        </ul>
    </div>
</template>

<script>
    export default {
        data () {
            return {
                dilo_roles: []
            }
        },

        // Fetches roles when the component is created.

        mounted(){
            axios.get('http://localhost:8000/api/dilo_roles')
                .then( response => this.dilo_roles = response.data );
        }

    }
</script>

这是axios response.data的内容：

{
data: [
{
id: 1,
role: "CRAFT",
template_id: "1",
description: "mtc crafts",
created_at: null,
updated_at: null
},
{
id: 2,
role: "SPR",
template_id: "1",
description: "supervisor",
created_at: null,
updated_at: null
} 
]
}

Answer 1

所以在laravel api控制器中我有：

"return response()-> json(['data' => DiloRole::all()]);"

应该是：

"return response(DiloRole::all());"

axios获取的数据未显示在vuejs模板v-for列表中

1 个答案: