Невозможно отобразить данные из ответа axios в компоненте vue

Question

Данные, извлеченные с помощью axios, не отображаются на vue, даже если в инструментах vue-dev есть данные. Плюс, я получаю ошибки: [Vue warn]: Ошибка при рендеринге: «Ошибка типа: невозможно прочитать свойство 'logbook_id' со значением NULL" и Ошибка типа: Ошибка при чтении свойства "logbook_id" со значением NULL . Новое в Ларавеле. Спасибо.

Данные получены из ответа

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();
    }
}

Контроллер

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

Answer 1

Вы получаете только один объект журнала вместо массива. Ваш текущий синтаксис будет работать, если вы вернули массив. Назначение v-for обычно состоит в том, чтобы иметь список элементов, но поскольку у вас есть только один элемент, нет необходимости иметь список.