_vm.item的Vue v-未定义

Question

我正在使用Quasar Framework 1.0.5，Vue 2.6，Vue-apollo。 我对v-for

有问题

在浏览器控制台中，即使有数据，我仍然收到错误_vm.item is undefined。

代码的工作方式如下：在 data 部分中，我将数组初始化为空数组。然后，当用户单击时，vue-apollo向后端发出请求并更新阵列。

数据部分：

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

vue-apollo更新功能（从API加载数据的地方）：

我正在使用apollo选项。

  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。

元素在数组中：

知道我在做什么错吗？

Answer 1

已通过删除模板中的前导p来解决：

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

不知道为什么这是一个问题。 PUG？