javascript - v-for 变量未定义

Question

只是尝试遍历从后端出现的对象数组并在前端显示这些对象。 Vue 提示“事件”没有在实例上定义，而是在渲染期间引用。我猜它不喜欢我的 v-for 中的事件变量在模板中。

组件:

<template>
    <div>
        <span v:for="(event, index) in eventList" :key="event.id">
            {{ event.id }}
        </span>

    </div>
</template>

<script>
import eventHelpers from "@/mixins/eventHelpers";
export default {
    name: 'eventsList',
    mixins: [eventHelpers],
    data() {
        return {
            eventList: [],
        }
    },
    async mounted() {
        this.eventList = await this.getAllEvents();
    },
    methods: {

    }
}
</script>

这个<span>一旦我让这些数据工作起来，它最终将成为一个卡片组件。

Answer 1

我不认为这些是你的问题，但你那里有一些拼写错误。1)是v-for，而不是v:for2) 在您的 Vue 实例中，我很确定它应该是 data:{}，而不是 data(){}