Axios 在 Laravel 的 Vue 组件中访问数据时给出 undefined

Question

我正在使用 Laravel 和 Vue 的组件，当我尝试从 vue 组件中 axios 返回的响应中访问横幅属性时，它给了我未定义的信息。

我正在访问像response.data.banners这样的属性

我正在通过以下方式从控制器返回数据：

public function getBanners(Request $request){
    return response()->json(['
        banners'=> BannerImage::active()->get()
    ]);
}

这是我访问 axios 响应的方式

<script>
    export default {

        data: function() {
            return  {
                banners: []
            }
        },
        mounted() {
            axios.get("getBanners").then((res)=> {
                console.log(res);
                console.log(res.data);
                console.log(res.data.banners);
                this.banners = res.data.banners;
            });
            console.log('Component mounted.')
        }
    }
</script>

axios 的回应

在访问横幅属性之前一切正常。有什么我做的不对吗？

Answer 1

您在' 和banners 之间有一个换行符↩，它显示在控制台第2 行"↩ banners": 中

问题

public function getBanners(Request $request){
    return response()->json(['    // <-- ↩ line break
        banners'=> BannerImage::active()->get()
    ]);
}

正确

public function getBanners(Request $request) {
    return response()->json([
        'banners' => BannerImage::active()->get()
    ]);
}