如何在 Vuejs 中获取“return Response::json(array([....,....]))”数据答案

【问题标题】：How to fetch "return Response::json(array([....,....])) " data in Vuejs如何在 Vuejs 中获取“return Response::json(array([....,....]))”数据
【发布时间】：2019-08-22 14:07:22
【问题描述】：

如何在 Vuejs 中获取 Laravel 多次返回“数组”数据

以下 Laravel 代码运行正常。

public function show($id)
    {
        $model = Fabricsbooking::with(['fileno','fileno.merchandiser', 'fileno.buyer', 'items.yarncount'])
        ->findOrFail($id);

        $yarn = Fabricsbookingitem::with('yarncount')->where('fabricsbooking_id', $id)
            ->groupBy('yarncount_id')
            ->selectRaw('sum(qty)as yarn_qty, sum(total_yarn)as total_yarn, yarncount_id' )
            ->get();

        return Response::json(array(['model'=>$model],['yarn'=> $yarn]));


    }

api.js 代码

import axios from 'axios'

export function get(url, params) {
    return axios({
        method: 'GET',
        url: url,
        params: params,

    })
}

export function byMethod(method, url, data) {
    return axios({
        method: method,
        url: url,
        data: data

    })
}

Vue模板页面脚本：

<script>
    import Vue from 'vue'
    import {get, byMethod} from '../../lib/api'
    export default {
        data:()=>{
            return{
                show:false,
                model:{
                    items:[],
                    fileno:{},
                },
                yarn:{}

            }
        },
        beforeRouteEnter(to, from, next){
            get(`/fabbooking/${to.params.id}`)
                .then((res)=>{
                    next(vm=> vm.setData(res))
                })
        },
        beforeRouteUpdate(to, from, next){
            this.show = false
            get(`/fabbooking${to.params.id}`)
                .then((res)=>{
                    this.setData(res)
                    next()
                })
        },
        methods:{
            setData(res){
            Vue.set(this.$data, 'model', res.data.model)
                this.show=true
            },
        deleteItem(){
            byMethod('delete', `/fabbooking/${this.model.id}`)
                .then((res)=> {
                    if (res.data.deleted){
                        this.$router.push('/fabook')
                    }
                })
        }
        },
    }
</script>

在浏览器中加载页面时，在控制台中显示如下错误代码 "app.js:682[Vue warn]: 渲染错误："TypeError: Cannot read property 'id' of undefined"" 需要Vue模板页面脚本的解决方案。

【问题讨论】：

标签： eloquent vuejs2 axios laravel-5.7

【解决方案1】：

这里的问题是Cannot read property 'id' of undefined

由于您使用id 的唯一位置是to.params.id，这意味着params 未定义。

您可以通过以下测试再次检查：

beforeRouteEnter(to, from, next){
            console.log(to.params)//like this you check params has values.
        },

可能您的路线配置不正确。例如，您是否忘记了“props:true”标志？

文档中的更多信息：vue route params

【讨论】：

感谢您的建议。