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

Question

如何在 Vuejs 中获取 Laravel 多个 return "array" 数据

以下 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]: Error in render: "TypeError: 无法读取未定义的属性 'id'"" 需要Vue模板页面脚本的解决方案。

Answer 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

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

How to fetch "return Response::json(array([....,....])) " data in Vuejs

eloquent

axios

vuejs2

laravel-5.7