Question

如何在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警告]：渲染错误：” 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中获取“返回Response :: json（array（[....，....]）））数据

1 个答案: