Php 表Vue组件上没有返回的数据

我不熟悉Laravel和Vue.js。我需要在Vue组件上显示数据。axios.get响应中的tableData变量不为空，并返回数组。但它并没有显示在桌子上。我的代码有问题吗？我正在学习一个关于媒体的教程

显示名称
描述
创建于
没有找到任何数据。
{{serialNumber（key1）}
{{value}}
导出默认值{
道具：{
fetchUrl:{type:String，必需：true}，
列：{type:Array，必需：true}，
},
数据（）{
返回{
tableData:[]
}
},
创建（）{
log（this.fetchUrl）；
返回this.fetchData（this.fetchUrl）
},
方法：{
获取数据（url）{
获取（url）
。然后（响应=>{
console.log（response.data.data）
this.tableData=response.data.data
console.log（this.tableData）
})
},
/**
*获取序列号。
*@param-key
* */
序列号（键）{
返回键+1；
},
},
过滤器：{
列标题（值）{
返回值.split（“”）.join（“”）.toUpperCase（）
}
},
名称：“读取”
}

控制器

public function getRoleForDataTable(Request $request)
{
    $roles = Role::all();
    return RoleResource::collection($roles);
}

RoleResource.php

public function toArray($request)
{
    return [
        'name'       => $this->name,
        'description'      => $this->description,
        'created_at' => Carbon::parse($this->created_at)->toDayDateTimeString(),
    ];
}

控制器

public function getRoleForDataTable() { 
     $roles = Role::all(); 
     return response(new RoleResource($roles)); }

RoleResource.php

public function toArray($request) {
    $itemList = [];

    foreach ($this->collection as $item) {

        array_push($itemList, [
            'id' => $item->id,
            'name' => $item->name,
            'description' => $item->description,
            'created_at'=>Carbon::parse($item->created_at)->toDateTimeString()
        ]);
    }
    return $itemList;
}

Vue文件

<table class="table">
            <thead>
            <tr>

                <th scope="col">Serial</th>
                <th scope="col">Display Name</th>
                <th scope="col">Description</th>
                <th scope="col">Created At</th>
            </tr>
            </thead>
            <tbody>
            <tr class="" v-if="tableData.length === 0">
                <td class="lead text-center" :colspan="columns.length + 1">No data found.</td>
            </tr>
            <tr v-for="(data, key1) in tableData" :key="data.id" class="m-datatable__row" v-else>
                <td>{{ serialNumber(key1) }}</td>
                <td>{{ data.name }}</td>
                <td>{{ data.description }}</td>
                <td>{{ data.created_at }}</td>
            </tr>
            </tbody>
        </table>

电视连续剧
显示名称
描述
创建于
没有找到任何数据。
{{serialNumber（key1）}
{{data.name}
{{data.description}}
{{data.created_at}}

您在console中看到的内容，对于这一行

console.log（this.tableData）

我相信tableData是一个数组。您应该执行类似于

this.tableData.push（）的操作并且不赋值。@Gabrielle-M（2）[{…}，{…}，ob:Observer]0:{ob:Observer}1:{ob:Observer}长度：2 ob:Observer-dep:dep{id:10，subs:Array（1）}值：（2）[{…}，{…}，ob ob ob:Observer]vmCount:0协议：对象协议：Array@Abiola我已经尝试过，但它显示相同的内容。请确保url正常工作。我可以查看您的角色资源吗？问题是Axios get的响应未存储在“tableData”变量中。请尝试此操作。tableData=response.datasame。没有找到任何数据。但它在控制台中有数据。你的角色资源？