渲染函数中的错误：Vue 中的“TypeError：无法读取未定义的属性”

【问题标题】：Error in render function: "TypeError: Cannot read property of undefined" in Vue渲染函数中的错误：Vue 中的“TypeError：无法读取未定义的属性”
【发布时间】：2017-09-29 22:56:41
【问题描述】：

我正在使用 Laravel 和 vue-router。

<template>
    <div class="content__inner">
        <div class="forums">

            <!-- Heading -->
            <div class="forums__heading" :style="'border-bottom:2px solid #' + board.category.color">
                <div class="lg-8 md-8 sm-12 column column__first">
                    <h2 class="forums__heading__title">{{ board.title }}</h2>
                </div>
                <div class="lg-1 md-1 sm-1 dtop column text-center">
                    <strong>Replies</strong>
                </div>
                <div class="lg-3 md-3 sm-4 column text-right">
                    <strong>Latest Reply</strong>
                </div>
                <div class="clearfix"></div>
            </div>

            <!-- Content -->
            <div class="forums__content">
                {{ board.category }}
            </div>

        </div>
    </div>
</template>

<script>

    export default {

        data() {
            return {
                board: [],
            }
        },

        created() {
            this.fetch_board(this.$route.params.slug);
        },

        methods: {

            /**
             * Fetch the board.
             *
             * @param string slug   The slug for the board.
             */
            fetch_board(slug)
            {
                this.$http.get('/api/forums/board/' + slug).then((response) => {
                    this.board = response.data;
                });
            },

        }

    };

</script>

“fetch_board”函数返回如下对象：

board:Object {
    id:5,
    title:"Game Discussion",
    slug:"5-game-discussion",
    description:"General talk about the game.",
    restriction:null,
    category_id:2,
    category:Object {
        id:2
        title:"Community",
        color:"2ECC71",
        created_at:"2017-05-02 07:30:25",
        updated_at:"2017-05-02 07:30:25",
    }
    created_at:"2017-05-02 07:30:25",
    updated_at:"2017-05-02 07:30:25",
}

当我访问{{ board.category }} 时，它会正确显示对象；但是当我访问 {{ board.category.title }} 时，它会显示标题，但也会给出 TypeError。

如果数据加载正确，为什么会出现此错误？

如何避免/修复此错误？

【问题讨论】：

• 您的模板会在“board”拥有这些属性之前尝试访问 board.category 或 board.title。这就是您收到这些警告的原因。要么在板内创建一个空白标题，要么在您访问最初不存在的东西的任何地方使用 v-if。
• 除了当我访问board.category 或board.title 时，我没有收到任何错误。我只在尝试访问 board.category.title 时收到错误消息。
• 是的。这真的很奇怪。 jsfiddle.net/yMv7y/2571你应该打开一个问题可能是。
• Deepak，Imagine17，不是问题，如果 board 存在但 board.category 没有出现错误，只是未定义，问题是当您尝试访问 board.category 时。标题，因为类别不是对象。你可以做 board.whatever 并且不会出错。 Deepak 的回答是正确的：例如
• 尝试将你的板子初始化为空对象而不是空数组