фоновые события и редактируемые события переднего плана в fullcalendar- vue

Question

Я использую компонент fullcalendar- vue. Мой сценарий - планирование событий, когда фоновые события являются недоступными временными интервалами, но вы можете добавлять события в календарь в доступных временных интервалах.

Два источника событий:

1. связанный реактивный массив для событий добавлен в календарь, когда пользователь щелкает функцию события
2. для извлечения фоновых событий, когда пользователь щелкает в следующем месяце

Как настроить эти два источника событий?

<FullCalendar editable="true" ref="calendar"
  :header="{
    left: 'prev,next today',
    center: 'title',
    right: 'dayGridMonth, timeGridWeek'
  }"
  :plugins="plugins"
  :weekends="true"
  :event-sources="eventSources"
  @dateClick="handleDateClick"/>

// I have tried adding the event sources as data: and computed:

computed: {
  eventSources: function () {
    return [
      {
        id: "events",
        // this is the array of editable events.
        // how do I access this in @dateClick?
        events: []
      },
      {
        id: "background",
        // these are the background events
        events: (info) => {
          // ... encode start/end dates in URL, send via axios promise ...
          axios.get(url)
            .then(response => {
            var calendarEvents = [];
            // ... load up the array of background events and return them ...
            return calendarEvents;
          })
          .catch(error => {
            console.log(error);
          });
        }
      }
    ];
  }
},

methods:
  handleDateClick: function (item) {
    let calendarApi = this.$refs.calendar.getApi();
    var source = calendarApi.getEventSourceById('events');
    // this is where I'm stuck.  Need to add this event to events[]
    // the following doesn't work because there's no access to the array in the source object
    source.events.push(
    {
      'title': 'New Event',
      'start': item.date,
      'duration': '01:00:00'
    });
}

Answer 1

Вы должны использовать объект данных для двухстороннего связывания. Вычисляемые свойства - это функции, которые кэшируются на основе их реактивных зависимостей.

Вы должны использовать методы для выборки данных, а не вычисленные. Вы можете использовать созданный для автоматического запуска вашей функции при создании компонента.

new Vue({
  el: "#app",
  data: {
    selected: '',
    names: []
  },
  computed: {
    sayHello() {
      return 'HELLO ' + this.selected.toUpperCase()
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      setTimeout(() => {
        this.names = ['john doe', 'sam smith', 'bill hicks']
      }, 1000)
    }
  }
})

<div id="app">
  <div>
    <div v-if="!names.length">
      <p>Loading...</p>
    </div>
    <div v-else>
      <label>Select a name</label>
      <select v-model="selected">
        <option selected disabled>Select a name</option>
        <option v-for="name in names" :value="name">{{ name }}</option>
      </select>
      <br />
      <p>{{ sayHello }}</p>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>