“無法讀取未定義事件的屬性”Vue.JS

Question

  <FullCalendar id="calendar"
  :options="calendarOptions"
  />
</section>

---

export default {
  components: {
    FullCalendar
  },
  
  
  data() {
    return {
      calendarOptions: {
        plugins: [dayGridPlugin ,interactionPlugin, timeGridPlugin, listPlugin],

---

  methods:{
    newEvent(){
      var theCalendar = document.getElementById("calendar");
      var eventName = document.getElementById("Ename").value;
      var sDate = document.getElementById("startDate").value;
      var eDate = document.getElementById("endDate").value;
      var type = document.getElementById("bookingType").value;
      var number = document.getElementById("numberOfPeople").value;
      
      //The addEvent can't be accessed, currently this function doesn't have access to the object Fullcalendar and because of that
      //we can't use addEvent.
        theCalendar.addEvent({
        title: eventName,
        start: sDate,
        allDay: true
      });
      alert('Great. Now, update your database...');

    }
  }

您好，我的 vue.JS 代碼目前無法讀取未定義的屬性。 我希望能夠使用我的日歷屬性填充 addEvent 類。

Answer 1

如果您嘗試訪問 API

你應該在你的日歷上提供一個參考

<FullCalendar ref="fullCalendar" :options="calendarOptions" />

然后可以這樣訪問

let calendarApi = this.$refs.fullCalendar.getApi()
calendarApi.next()

看這里

但是我懷疑您實際上想要的是訪問 calendarOptions 對象，它很簡單

this.calendarOptions.events

假設您已按照上一個鏈接中的指定定義對象

data() {
  return {
    calendarOptions: {
      plugins: [ dayGridPlugin, interactionPlugin ],
      events: [
        { title: 'event 1', date: '2019-04-01' },
        { title: 'event 2', date: '2019-04-02' }
      ]
    }
  }
},