Vue v-for _vm.item is undefined

Question

i'm using Quasar Framework 1.0.5, Vue 2.6, Vue-apollo. I have a problem with v-for

In the browser console i get a error _vm.item is undefined even though the data is there.

The code works like this that in the data section i initialize my array to an empty array. Then when the user clicks vue-apollo is making a request to the backend and updates the array.

The data section:

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

The vue-apollo update function (where the data is loaded from the API):

I'm using the apollo option.

  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);
      },

The template (in PUG, which generates 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}}  

The problem is the last {{item.city}} . There it says _vm.item is undefined. When i remove this then there is no error. Even {{eventsByDay.length}} shows the correct length of the array - 2.

The elements are there in the Array:

Any idea what i doing wrong?

Answer 1

Solved by removing the leading p in the template:

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

Dont know why this is a problem. PUG?