vue接收后台返回数据报错

Question

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;
}

再次补充前端代码：

Answer 1

你这个错误，其实是vue props 传值需要数组 Array, 你的数据没问题话，可能是初始化组件传值是个Object

Answer 2

data.data

放出你的前端代码来看看啊，数据返回的没问题。这就前端的问题放一堆php代码干嘛

Answer 3

改成这样试试。。 this.permissionData = response.data[0]

Answer 4

问题
你的问题还是在后端，从你给出的数据格式示例来看，后端返回的内容是一个 关联数组，在 return 的时候会转换成一个 json 对象，所以你前端接收到的数据就是一个 Object 类型

而你说的不用递归方法返回的数据就没问题，应该是你的库方法帮你做了数据格式的转换，Permission::get()->toArray()返回的数据应该是一个索引数组，所以前端接收到的数据是 Array 类型

解决方法

解决方法有两种，一种前端去解决，一种后端去解决

1. 前端 => 更改组件的 props 属性配置，将类型改为 Object，然后在前端将接收到的数据处理成需要的格式
2. 后端 => 在后端处理数据格式，将数据处理成前端需要的，比如 索引数组，而不是关联数组，然后返回给前端

建议
前后端分离架构中，前后端的接口通信建议用 JSON 格式的数据，有些框架会隐式的帮你转换，但是最好自己显示的去做这部分的转换工作，可控性更强

Answer 5

改成这样试试看
`
this.permissionData = Object.values(response.data)
`