Как получить данные "return Response :: json (array ([...., ....]))" в Vuejs - PullRequest
Новая
       15

Как получить данные "return Response :: json (array ([...., ....]))" в Vuejs

0 голосов
/ 01 апреля 2019

Как получить данные массива Laravel с множественным возвратом в Vuejs

Ниже код 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]: ошибка при рендеринге:« Ошибка типа: невозможно прочитать свойство 'id' из неопределенного "" Нужны решения для Vue шаблона страницы скрипта.

1 Ответ

0 голосов
/ 02 апреля 2019

Проблема здесь 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"?

Больше информации в документации: параметры маршрута

...