无法在vue组件中显示来自axios响应的数据

Question

即使在vue-dev工具中有数据，使用axios检索的数据也不会显示在vue上。另外我遇到错误： [Vue警告]：渲染错误：“ TypeError：无法读取null的属性'logbook_id'” 和 TypeError：无法读取null的属性'logbook_id'< / strong>。 Laravel的新功能。谢谢。

Data retrieved from response

Vue组件

<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的目的通常是拥有一个项目列表，但是由于您只有一个项目，因此拥有列表是没有目的的。