vue接收后台返回数据报错

guwenjun0228
  • 130

1.后台使用的是Laravel框架,前端使用了vue来接收数据
2.后台需返回的数据如下:
image.png
打印出来明明是数组
3.前台接收时报错了,“希望的到的是数组,却是对象”
image.png

但是我返回的就是数组呀
image.png
各位大神帮我看看问题出在哪了?

补充:后台中sortMenu()方法用了递归,感觉是这里出了问题,因为我直接返回

return $data = Permission::get();

是正常的
image.png

我把递归方法也贴出来

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

再次补充前端代码:
1.jpg

回复
阅读 3.2k
5 个回答

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

data.data

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

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

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

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

解决方法

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

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

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

你知道吗?

宣传栏