Cannot display data from axios response in vue component

Question

The data retrieve using axios is not displaying on vue eventhough in vue-dev tools there is data in it. Plus i'm getting errors : [Vue warn]: Error in render: "TypeError: Cannot read property 'logbook_id' of null" and TypeError: Cannot read property 'logbook_id' of null. New in Laravel. Thanks.

Data retrieved from response

Vue Component

<template>
<div class="container">
    <h1 v-for="log in logbook" v-bind:key="log.logbook_id" > {{ log.title }} 
</h1>
</div> 
</template>

<script>
export default {
    data(){
        return{
            logbook:{},
        }
    },
    methods:{
        fetchLog(){
            const url = `/api/logbook/${this.$route.params.id}`;
            axios.get(url).then(response => this.logbook = response.data);
        },
    },
    mounted() {
        console.log('Component mounted.');
        this.fetchLog();
    }
}

Controller

    public function show($id)
{
    $log = logbook::where(['logbook_id' => $id])
    ->first();
    return response($log);
}

Yes, json_encode($log);. That will send the data in JSON format to the client end. — nice_dev
Also, response => this.logbook = response.data should be (response) => { this.logbook = response.data}) ? Note that if you are using .data, you need to make sure that key is added when you are sending response to vue from your server. — nice_dev
tried both of them, still the same unfortunately. I think the main error is the "Cannot read property 'logbook_id' of null". I'm not sure what that means tho. @vivek_23 — hehe

Lassi Uosukainen Lassi Uosukainen · Accepted Answer · 2019-03-21T19:47:11

You only get back a single logbook object, instead of an array. Your current syntax would work, if you got back an array. The purpose of v-for is commonly to have a list of items, but as you only have one item, there is no purpose in having a list.

Cannot display data from axios response in vue component

1 Answers