javascript - 使用 vue.js v-for 功能和 axios 获取每个未定义错误的控制台

Question

我正在尝试从 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>

Answer 1

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