调用函数时出现多个错误- vuejs

Question

我正在尝试使用fullcalendar.io。下面是示例和文档。然而，当调用一个函数时，它给出了几个错误，我无法解决它，因为我不明白错误的原因。

错误1:

[Vue warn]: Error in data(): "ReferenceError: handleDateSelect is not defined"
found in
---> <Calendary> at src/components/Calendary.vue
<Home> at src/views/Home.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>

错误2:

vue.runtime.esm.js?2b0e:1897 ReferenceError: handleDateSelect is not defined
at VueComponent.data (Calendary.vue?87e1:77)
at getData (vue.runtime.esm.js?2b0e:4761)
at initData (vue.runtime.esm.js?2b0e:4718)
at initState (vue.runtime.esm.js?2b0e:4655)
at VueComponent.Vue._init (vue.runtime.esm.js?2b0e:5020)
at new VueComponent (vue.runtime.esm.js?2b0e:5168)
at createComponentInstanceForVnode (vue.runtime.esm.js?2b0e:3304)
at init (vue.runtime.esm.js?2b0e:3133)
at createComponent (vue.runtime.esm.js?2b0e:6022)
at createElm (vue.runtime.esm.js?2b0e:5969)

错误3:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method "calendarOptions" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
found in
---> <Calendary> at src/components/Calendary.vue
<Home> at src/views/Home.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>

错误4:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'weekends')"
found in
---> <Calendary> at src/components/Calendary.vue
<Home> at src/views/Home.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>

错误五:

[Vue warn]: Error in data(): "TypeError: Cannot read properties of undefined (reading 'handleDateSelect')"
found in
---> <Calendary>
<Home> at src/views/Home.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root>

这些只是一些，它们只在我调用函数时出现。我使用vue 3与vuetify

代码:

<template>
<div class='demo-app'>
<div class='demo-app-sidebar'>
<div class='demo-app-sidebar-section'>
<h2>Instructions</h2>
<ul>
<li>Select dates and you will be prompted to create a new event</li>
<li>Drag, drop, and resize events</li>
<li>Click an event to delete it</li>
</ul>
</div>
<div class='demo-app-sidebar-section'>
<label>
<input
type='checkbox'
:checked='calendarOptions.weekends'
@change='handleWeekendsToggle'
/>
toggle weekends
</label>
</div>
<div class='demo-app-sidebar-section'>
<h2>All Events ({{ currentEvents.length }})</h2>
<ul>
<li v-for='event in currentEvents' :key='event.id'>
<b>{{ event.startStr }}</b>
<i>{{ event.title }}</i>
</li>
</ul>
</div>
</div>
<div class='demo-app-main'>
<FullCalendar
class='demo-app-calendar'
:options='calendarOptions'
>
<template v-slot:eventContent='arg'>
<b>{{ arg.timeText }}</b>
<i>{{ arg.event.title }}</i>
</template>
</FullCalendar>
</div>
</div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
export default {
components: {
FullCalendar
},
data: () => ({
calendarOptions: {
plugins: [
dayGridPlugin,
timeGridPlugin,
interactionPlugin
],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialView: 'dayGridMonth',
// initialEvents: INITIAL_EVENTS,
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
select: this.handleDateSelect
// eventClick: this.handleEventClick,
// eventsSet: this.handleEvents
},
currentEvents: []
}),
methods: {
handleWeekendsToggle() {
this.calendarOptions.weekends = !this.calendarOptions.weekends // update a property
},
handleDateSelect(selectInfo) {
let title = prompt('Please enter a new title for your event')
let calendarApi = selectInfo.view.calendar
calendarApi.unselect() // clear date selection
if (title) {
calendarApi.addEvent({
id: createEventId(),
title,
start: selectInfo.startStr,
end: selectInfo.endStr,
allDay: selectInfo.allDay
})
}
},
handleEventClick(clickInfo) {
if (confirm(`Are you sure you want to delete the event '${clickInfo.event.title}'`)) {
clickInfo.event.remove()
}
},
handleEvents(events) {
this.currentEvents = events
}
},
};
</script>
<style lang='css' scoped>
h2 {
margin: 0;
font-size: 16px;
}
ul {
margin: 0;
padding: 0 0 0 1.5em;
}
li {
margin: 1.5em 0;
padding: 0;
}
b { /* used for event dates/times */
margin-right: 3px;
}
.demo-app {
display: flex;
min-height: 100%;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
.demo-app-sidebar {
width: 300px;
line-height: 1.5;
background: #eaf9ff;
border-right: 1px solid #d3e2e8;
}
.demo-app-sidebar-section {
padding: 2em;
}
.demo-app-main {
flex-grow: 1;
padding: 3em;
}
.fc { /* the calendar root */
max-width: 1100px;
margin: 0 auto;
}
</style>

Answer 1

解决方案是数据结构:

data: function() {
return{
calendarOptions: {
...
}
}
},

Answer 2

我正在尝试复制您的代码，并在这里抛出错误。

error 'createEventId' is not defined

除此之外，你所面临的主要错误是通过这样写数据来解决的:

data() {
return {
calendarOptions: {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
},
initialView: 'dayGridMonth',
// initialEvents: INITIAL_EVENTS,
editable: true,
selectable: true,
selectMirror: true,
dayMaxEvents: true,
weekends: true,
select: this.handleDateSelect // THIS will throw an error!

如果您看到最后一行，您正在使用this，但通过使data()成为箭头函数，您将失去this上下文。

例子:

const person = {
firstName: 'John',
regularFunction() {
console.log(this.firstName)
},
arrowFunction: () => {
console.log(this.firstName)
}
}
person.regularFunction() // 'John'
person.arrowFunction() // undefined