如何将存储在一个变量中的数据添加到 Nuxt 中 data return 中的另一个数据字段？

Question

我正在尝试将完整日历添加到我的 Nuxt 项目中。这是我的代码。

    <template>
      <div>
        <!-- {{calendarOptions}} -->
        <FullCalendar :options="calendarOptions" />
      </div>
    </template>
    <script>
    import FullCalendar from '@fullcalendar/vue'
    import dayGridPlugin from '@fullcalendar/daygrid'
    import interactionPlugin from '@fullcalendar/interaction'
    import timeGridPlugin from '@fullcalendar/timegrid'
    
    export default {
      components: {
        FullCalendar, // make the <FullCalendar> tag available
      },
      data() {
        return {
          allevents: [{ title: 'Event 2', start: '2021-01-04', end: '2021-01-07' },
          { title: 'Event 3', start: '2021-01-05', end: '2021-01-09' }],

          calendarOptions: {
            plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
            initialView: 'dayGridMonth',
            nowIndicator: true,
          
            events: [
              { title: 'Event 1', start: '2021-01-01', end: '2021-01-03' },            
            ],               
          },
        }
      },
    }
    </script>

我想将 allevents array 中的数据添加到 events array inside 日历选项对象。 谁能告诉我该怎么做？

Answer 1

创建一种方法，将数据从 allevents 数组推送到 calendarOptions.events 数组。

methods: {
  doTheThing() {
    this.allevents.forEach(event => {
       this.calendarOptions.events.push(event)
    }
  }
}