问答

vue接收后台返回数据报错

作者:admin 2021-08-04 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

###

你这个错误,其实是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)
`

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • vue接收后台返回数据报错

    vue接收后台返回数据报错

  • 关于vue 使用element-ui问题

    关于vue 使用element-ui问题

  • 使用navicat 可以把oracle数据的的表结

    使用navicat 可以把oracle数据的的表结

  • typescript范型类型推断的问题

    typescript范型类型推断的问题

腾讯云代理商
海外云服务器