laravel 渲染函数中的错误：Vue 中的“TypeError：无法读取未定义的属性”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43737528/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Error in render function: "TypeError: Cannot read property of undefined" in Vue
提问by
I am using Laravel and vue-router.
我正在使用 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>
The 'fetch_board' function returns an object like the following:
'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",
}
When I access the {{ board.category }}it displays the object correctly; but when I access {{ board.category.title }}it displays the title, but ALSO gives a TypeError.
当我访问{{ board.category }}它时，它会正确显示对象；但是当我访问{{ board.category.title }}它时会显示标题，但也会给出一个 TypeError。
Why I am getting this error if the data is being loaded correctly?
如果数据加载正确，为什么会出现此错误？
How can I avoid/fix this error?
如何避免/修复此错误？
回答by Brendan Kendrick
You are seeing this error because you are initializing "board" to an empty array. The component tries to evaluate "board.category.title" when it binds the reactivity just prior to the created() hook.
您看到此错误是因为您正在将“board”初始化为空数组。当组件在 created() 钩子之前绑定反应性时，它会尝试评估“board.category.title”。
With board set as an empty array, step by step the evaluation might look like this:
将 board 设置为空数组，逐步评估可能如下所示：
const board = [];
const category = board.category; // undefined
const title = category.title; // TypeError, because category is undefined
You should stop seeing this error if you initialize your data like so:
如果您像这样初始化数据，您应该不会再看到此错误：
data() {
return {
board: {
category: {
title: ''
}
}
}
}
Here is the Vue lifecycle diagramwhich illustrates when the created() event is fired
这是Vue 生命周期图，它说明了何时触发 created() 事件
