1.后台使用的是Laravel框架,前端使用了vue来接收数据
2.后台需返回的数据如下:
打印出来明明是数组
3.前台接收时报错了,“希望的到的是数组,却是对象”
但是我返回的就是数组呀
各位大神帮我看看问题出在哪了?
补充:后台中sortMenu()方法用了递归,感觉是这里出了问题,因为我直接返回
return $data = Permission::get();
是正常的
我把递归方法也贴出来
function sortMenu($menus,$pid=0)
{
$arr = [];
if (empty($menus)) {
return '';
}
foreach ($menus as $key => $value) {
if ($value['parent_id'] == $pid) {
$arr[$key] = $value;
$arr[$key]['children'] = sortMenu($menus,$value['id']);
}
}
return $arr;
}
再次补充前端代码:
你这个错误,其实是vue props 传值需要数组 Array, 你的数据没问题话,可能是初始化组件传值是个Object
###data.data
放出你的前端代码来看看啊,数据返回的没问题。这就前端的问题放一堆php代码干嘛
###改成这样试试。。 this.permissionData = response.data[0]
###问题
你的问题还是在后端,从你给出的数据格式示例来看,后端返回的内容是一个 关联数组
,在 return 的时候会转换成一个 json 对象,所以你前端接收到的数据就是一个 Object 类型
而你说的不用递归方法返回的数据就没问题,应该是你的库方法帮你做了数据格式的转换,Permission::get()->toArray()
返回的数据应该是一个索引数组,所以前端接收到的数据是 Array 类型
解决方法
解决方法有两种,一种前端去解决,一种后端去解决
- 前端 => 更改组件的 props 属性配置,将类型改为 Object,然后在前端将接收到的数据处理成需要的格式
- 后端 => 在后端处理数据格式,将数据处理成前端需要的,比如 索引数组,而不是关联数组,然后返回给前端
建议
前后端分离架构中,前后端的接口通信建议用 JSON 格式的数据,有些框架会隐式的帮你转换,但是最好自己显示的去做这部分的转换工作,可控性更强
改成这样试试看
`
this.permissionData = Object.values(response.data)
`