以编程方式添加新事件时，RadCalendar 不更新事件答案

【问题标题】：RadCalendar not updating events when new event added programatically以编程方式添加新事件时，RadCalendar 不更新事件
【发布时间】：2019-02-26 00:08:11
【问题描述】：

我正在使用带有 Nativescript-Vue 的 RadCalendar 并尝试允许用户手动（通过表单）添加事件，但是一旦事件被推送到 eventSource 中，日历不会对其做出反应（它没有显示在看法）。如果我重新渲染日历，它会显示新添加的事件。 知道为什么日历没有对此更改做出反应并添加新事件吗？

eventSource 绑定了一个名为 calendarEvents 的变量。

<RadCalendar height="100%" width="100%" ref="calendarComponent"
        id="calendar"
        :eventSource="calendarEvents"

        eventsViewMode="Inline"
        selectionMode="Single"
        viewMode="Month"
        transitionMode="Slide"

        @dateSelected="onDateSelected"
        @dateDeselected="onDateDeselected"
        @navigatedToDate="onNavigatedToDate"
        @navigatingToDateStarted="onNavigatingToDateStarted"
        @viewModeChanged="onViewModeChanged"
        @inlineEventSelected="onInlineEventSelected" />

这是应该将事件添加到日历的方法：

    onAddBookingExternal () {
      this.$showModal(BookingExternal).then((data) => {
        if(data) {
          ...          
          let event = new calendarModule.CalendarEvent('Name', startDate, endDate, false, color)

          this.calendarEvents.push(event)
        }
      })
    },

感谢您的帮助！

【问题讨论】：

你可以创建一个游乐场吗？
从 'nativescript-ui-calendar' 导入 { CalendarEvent };

标签： nativescript nativescript-vue

【解决方案1】：

这是 RadCalendar 的一个已知问题，您必须提供新的数组引用才能更新 UI。只是将数据推送到同一个数组不会触发更新。

onAddBookingExternal () {
  this.$showModal(BookingExternal).then((data) => {
    if(data) {
      ...          
      let event = new calendarModule.CalendarEvent('Name', startDate, endDate, false, color)

      this.calendarEvents = [...this.calendarEvents, event];
    }
  })
}

Playground Sample

【讨论】：