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

Question

How to fetch Laravel multiple return "array" data in Vuejs

Below Laravel code is working properly.

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 code

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 template page script:

<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>

When load the page in browser, shown below error code in Console "app.js:682[Vue warn]: Error in render: "TypeError: Cannot read property 'id' of undefined"" Need to solutions for Vue template page script.

Slim · Accepted Answer · 2019-04-01 23:52:55Z

2

The problem here is Cannot read property 'id' of undefined

Since the only place you use id is in to.params.id it means that params is undefined.

You can double check it with the following test:

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

Maybe your route is not correctly configured. Did you forget the "props:true" flag for example?

More info in the docs: vue route params

answered Apr 1, 2019 at 23:52

Slim

1,2761 gold badge15 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aminul Over a year ago

Thanks for suggestion.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related