我正在使用 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。
元素在数组中:
知道我做错了什么吗?