0

我正在使用 Quasar Framework 1.0.5、Vue 2.6、Vue-apollo。我有问题v-for

在浏览器控制台_vm.item is undefined中,即使数据在那里,我也会收到错误消息。

代码是这样工作的,在数据​​部分我将我的数组初始化为一个空数组。然后当用户点击时 vue-apollo 正在向后端发出请求并更新数组。

数据部分:

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

vue-apollo 更新函数(从 API 加载数据的地方):

我正在使用阿波罗选项。

  apollo: {
    loadTermine: {
      query: TermineByDayQuery,
      ...
      result ({ data, loading, networkStatus }) {
        console.info('before:');
        console.info(this.eventsByDay);
        this.eventsByDay = data.TermineByDayQuery;
        console.info('after:');
        console.table(this.eventsByDay);
      },

模板(在 PUG 中,生成 html):

  q-card-section.q-mx-none.row(v-if="eventsByDay.length > 0")
    q-item.col.text-left.q-pa-none
      q-item-section
        .text-grey-7 {{this.selectedDate | formatDate}}
        p.text-black.q-mt-lg.text-weight-bold(v-for="item in eventsByDay" :key="item.id") Lorem ipsum dolor
          .row
            p.col.text-grey-7.q-mt-xs 07:50 Uhr
            p.col.text-grey-7.q-mt-xs.text-right Ort {{eventsByDay.length}} {{item.city}}  

问题是最后一个{{item.city}}。那里说_vm.item is undefined。当我删除它时,没有错误。甚至 {{eventsByDay.length}}显示数组的正确长度 - 2。

元素在数组中:

在此处输入图像描述

知道我做错了什么吗?

4

1 回答 1

0

p通过删除模板中的前导解决:

.text-black.q-mt-lg.text-weight-bold(v-for="item in eventsByDay" :key="item.id") Lorem ipsum dolor

不知道为什么这是一个问题。帕格?

于 2019-10-04T09:20:16.497 回答