我需要调用一个函数来在事件创建后重新呈现事件。该事件正在被触发，但视图未被更新。
我正在使用Vue 2，vue-fullcalendar和Laravel 5.3。
我成功发布了该事件，但视图未更新。如果我向视图添加一个按钮并将方法调用绑定到单击，它会更新视图，从我的服务器重新获取事件。如果我在组件内部调用它，它不会更新我的浏览器视图。
我在$emit内调用method，该mounted在vue-fullcalendar的$on组件创建中调用。我创建了<template>
<full-calendar ref:"calendar" id="calendar" :event-sources="eventSources"></full-calendar >
</template>
<script>
require('fullcalendar')
export default {
props: {
events: {
default() {
return []
}
},
eventSources: {
default() {
return [
{
events(start, end, timezone, callback) {
Vue.http.get('http://127.0.0.1:8000/getAgendamentosEventos', {timezone: timezone}).then(response => {
callback(response.data.events)
})
},
color: '#1ABC9C',
},
{
events(start, end, timezone, callback) {
Vue.http.get('http://127.0.0.1:8000/getDatasFechadas', {timezone: timezone}).then(response => {
callback(response.data.events)
})
},
color: '#DC0000',
}
]
},
},
editable: {
default() {
return true
},
},
selectable: {
default() {
return true
},
},
selectHelper: {
default() {
return true
},
},
header: {
default() {
return {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
}
},
},
defaultView: {
default() {
return 'month'
},
},
sync: {
default() {
return false
}
},
},
mounted() {
const cal = $(this.$el),
self = this;
cal.fullCalendar({
header: this.header,
defaultView: this.defaultView,
editable: this.editable,
selectable: this.selectable,
selectHelper: this.selectHelper,
aspectRatio: 2,
slotDuration: '00:10:00',
timeFormat: 'HH:mm',
events: self.events,
eventSources: self.eventSources,
fixedWeekCount: false,
eventRender(event, element) {
if (this.sync) {
self.events = cal.fullCalendar('clientEvents')
}
},
eventDestroy(event) {
if (this.sync) {
self.events = cal.fullCalendar('clientEvents')
}
},
eventClick(event) {
$(self.$el).trigger('event-selected', event);
console.log('click');
console.log(event);
cal.fullCalendar('refetchEvents');
},
eventDrop(event) {
console.log('drop-event');
$(self.$el).trigger('event-drop', event);
},
eventResize(event) {
$(self.$el).trigger('event-resize', event)
},
select(start, end, jsEvent) {
var data = start.format("YYYY-MM-DD");
var dia = start.format("dddd");
$.fancybox({
type: "iframe",
href: "http://127.0.0.1:8000/admin/agendamentos/create",
width: "80%",
height: "90%",
afterLoad: function() {
$(".fancybox-iframe").contents().find("input[name='dia_semana']").val(dia);
$(".fancybox-iframe").contents().find("select[name='profissionais[]']").attr("disabled","disabled");
$(".fancybox-iframe").contents().find("input[name='data']").val(data);
$(".fancybox-iframe").contents().find("input[name='data']").attr("readonly","readonly");
},
afterClose: function(){
console.log('afterclose');
setTimeout(function(){ console.log('primeiro'); self.refreshEvents(); }, 5000);
$(self.$el).trigger('event-created', {
start,
end,
allDay: !start.hasTime() && !end.hasTime(),
});
console.log('fim');
}
});
},
});
self.$on('refetch-events', function(){
console.log('Event from parent component emitted');
});
self.$on('reload-events', function(){
$(this.$el).fullCalendar('rerenderEvents');
console.log('rerender-events');
});
},
methods: {
refreshEvents() {
console.log('chamou');
this.$emit('refetch-events');
this.$emit('rerender-events');
this.$emit('reload-events');
},
},
watch: {
events: {
deep: true,
handler(val) {
const cal = $(this.$el);
cal.fullCalendar('removeEvents');
cal.fullCalendar('addEventSource', this.events);
cal.fullCalendar('rerenderEvents');
cal.fullCalendar('refetch-events');
},
}
},
events: {
'remove-event'(event) {
$(this.$el).fullCalendar('removeEvents', event.id)
},
'rerender-events'(event) {
$(this.$el).fullCalendar('rerenderEvents')
},
'render-event'(event) {
$(this.$el).fullCalendar('renderEvent', event)
},
'reload-events'() {
$(this.$el).fullCalendar('removeEvents')
$(this.$el).fullCalendar('addEventSource', this.events)
},
'rebuild-sources'() {
$(this.$el).fullCalendar('removeEvents')
this.eventSources.map(event => {
$(this.$el).fullCalendar('addEventSource', event)
})
}
}
}
</script>
来监听是否通过我的代码触发了事件。一切似乎工作正常，除了视图自动更新（这是我使用Vuejs的原因）。
这里是完整的代码：
Experiment 1
ID
compound 1:
compound 2:
machine:
reagent
val1
val2
val3
val4
ID
compound 1:
compound 2:
machine:
reagent
val1
val2
val3
val4
Experiment 2
ID
compound 1:
compound 2:
machine:
reagent
val1
val2
val3
val4
ID
compound 1:
compound 2:
machine:
reagent
val1
val2
val3
val4
...
experiment N
供参考：
vue-fullcalendar-example of event firing with button
我真的不知道为什么会发生这种情况......感谢任何帮助，对于任何使用vue-fullcalendar实时更新的开发者来说，这是一个非常有用的参考，所以提前感谢。< / p>