完整日历/VUE应用程序中的事件未更新
完整日历/VUE应用程序中的事件未更新
提问于 2017-07-13 22:06:35
在我的cal.vue组件中，我有一个fullcalendar组件。在cal.vue中，我有一个名为submit的方法。在submit中，我使用this.$refs.calendar (成功地)引用了fullcalendar组件。但是，当我在我的提交函数中执行this.$refs.calendar.$emit('refetchEvents');时，事件不会被获取(我的事件不会在我的日历上更新)。为什么我的事件在提交时没有更新，我如何更新它们？
相关代码如下：
<template>
<div id="calendar" :navL="navLinks" :event-sources="eventSources" @event-selected="eventSelected" @event-created="eventCreated" :config="config" >
<button class="btn btn-secondary" v-on:click="submit()">
Submit
</button>
<full-calendar id="target" ref="calendar" :event-sources="eventSources" @event-selected="eventSelected" @day-click="click"@event-created="eventCreated" :config="config"></full-calendar>
</div>
</template>
<script>
const self = this;
export default {
name: 'calendar',
data() {
return {
eventSources: [
{
url: 'http://localhost:3000/getAppointments',
type: 'GET',
data: {
id: this.$store.getters.user
},
error: function() {
alert('there was an error while fetching events!');
},
}
],
};
},
methods: {
submit: function() {
console.log(this.$refs.calendar); //prints fullcalendar VUE component
this.$refs.calendar.$emit('refetchEvents'); //nothing appears to happen here
},
},
}
</script>回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-14 01:51:52
根据documentation的说法
this.$refs.calendar.$emit('refetchEvents')应该是
this.$refs.calendar.$emit('refetch-events')Stack Overflow用户
发布于 2019-05-30 03:36:12
如果通过npm包使用普通日历：“@ FullCalendar /fullcalendar”，"@fullcalendar/daygrid"，"@fullcalendar/timegrid"，"@fullcalendar/vue“
html: <full-calendar ref="fullCalendar" :events="events" />
inside a method to update an event:
let calendar = this.$refs.fullCalendar.getApi()
const updatedEvent = calendar.getEventById(eventId)
updatedEvent.setProp('title', 'New Title')
updatedEvent.setProp('backgroundColor', 'yellow')
updatedEvent.setProp('borderColor', 'yellow')
updatedEvent.setProp('textColor', 'black')上面的代码将重新呈现fullCalendar事件，但不会更改您的this.events数组。可能有一些东西在一次拍摄中包含了所有事件，否则你就不得不这么做了：
this.events.forEach(event => {
...similar code the above
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45083071
复制相关文章
相似问题