Javascript 渲染函数中出现错误："；TypeError:无法读取未定义的属性；在Vue

我正在使用Laravel和vue路由器

<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>

当我访问

{{board.category}}

时，它会正确显示对象；但是当我访问

{{board.category.title}}

时，它会显示标题，但也会给出一个TypeError

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

---

如何避免/修复此错误？

您看到此错误是因为您正在将“线路板”初始化为空阵列。组件在创建（）钩子之前绑定反应性时，尝试评估“board.category.title”

将线路板设置为空阵列时，逐步计算可能如下所示：

const board = [];

const category = board.category; // undefined

const title = category.title; // TypeError, because category is undefined

如果按如下方式初始化数据，则应停止看到此错误：

data() {
  return {
    board: {
      category: {
        title: ''
      }
    }
  }
}

---

下面是一个示例，说明了何时触发created（）事件

由于Vue不允许动态添加根级别反应性属性，因此必须通过预先声明所有根级别反应性数据属性来初始化Vue实例，即使使用空值：

var vm=new Vue({
数据：{
//用空值声明消息
消息：“”
},
模板：“{message}}”
})
//稍后设置'message'
vm.message='你好！'

如果未在“数据”选项中声明消息，Vue将警告您渲染函数正在尝试访问不存在的属性

---

您的模板尝试在“board”具有这些属性之前访问board.category或board.title。这就是为什么你会收到这些警告。在board内部创建一个空白标题，或者在访问最初不存在的内容时使用v-if。除非当我访问

board.category

或

board.title

时，我没有收到任何错误。我仅在尝试访问

board.category.title

时出错。是。真奇怪。您应该打开一个问题，可能是。Deepak，Imagine17，不是问题，如果board存在，但是board.category没有您没有得到错误，是jsut未定义，问题是当您尝试访问board.category.title时，因为category不是对象。你可以做任何事情，不要出错。Deepak的答案是正确的：尝试将板初始化为空对象，而不是空数组

data() {
  return {
    board: {
      category: {
        title: ''
      }
    }
  }
}

var vm = new Vue({
  data: {
    // declare message with an empty value
    message: ''
  },
  template: '<div>{{ message }}</div>'
})
// set `message` later
vm.message = 'Hello!'