首页 > 解决方案 > 如何将存储在一个变量中的数据添加到 Nuxt 中数据返回内的另一个数据字段?

问题描述

我正在尝试将完整日历添加到我的 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 数组中的数据添加到calenderOptions 对象内的events 数组中。谁能告诉我我该怎么做?

标签: firebasevue.jsfullcalendarnuxt.jsfullcalendar-scheduler

解决方案


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

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

推荐阅读