我正在尝试从 API 加载日历事件,然后使用 Axios
和 Vue.js
显示它们。它正在工作,但我在控制台中收到以下错误:
[Vue warn]: Error in render: "TypeError: Cannot read property 'forEach' of undefined"
我的 vue 文件如下。内容呈现正常,但每次网站加载时都会出现上述警告。一定是我缺少的简单东西。
<template>
<div class="row row-equal">
<div class="flex xs12">
<va-card
no-padding-h
style="overflow-x: auto;"
:title=title>
<va-timeline style="min-width: 400px;" v-if="meetings">
<va-timeline-item v-for="event in meetings">
<template slot="before">
<div
class="title text--center"
:style="{color: $themes.success}">
{{ event.start }} - {{ event.end }}
</div>
<div class="va-timeline-item__description">
{{ event.summary }}
</div>
<div class="va-timeline-item__description">
{{ event.creator }}
</div>
</template>
</va-timeline-item>
</va-timeline>
</va-card>
</div>
</div>
</template>
<script>
var moment = require('moment')
export default {
name: 'dashboard-calendars',
props: ['title'],
data () {
return {
meetings: [],
}
},
methods: {
loadCalendars () {
this.$http.get('calendar?name=' + this.$props.title + '&format=json')
.then(response => {
this.meetings = response.data
})
.catch(error => {
// handle error
console.log(error)
})
},
},
mounted () {
this.loadCalendars()
},
}
</script>
<style scoped>
.title {
font-size: 1.0em;
}
</style>
<style>
.va-card__header-title{
font-size: 1.0em !important;
}
</style>
最佳答案
v-for 仍在执行,因为 v-if='meetings' 允许循环继续,所以使用 @pascalLamers 响应我添加了长度检查并且有效。
<va-timeline-item v-for="event in meetings">
<template slot="before">
<div
class="title text--center"
:style="{color: $themes.success}">
{{ event.start }} - {{ event.end }}
</div>
<div class="va-timeline-item__description">
{{ event.summary }}
</div>
<div class="va-timeline-item__description">
{{ event.creator }}
</div>
</template>
</va-timeline-item>
</va-timeline>```
关于javascript - 使用 vue.js v-for 功能和 axios 获取每个未定义错误的控制台,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59529566/