如何在 FullCalendarV4 和 Vue.js 中为事件删除按钮添加删除功能答案

【问题标题】：How add remove function to event delete button in FullCalendarV4 and Vue.js如何在 FullCalendarV4 和 Vue.js 中为事件删除按钮添加删除功能
【发布时间】：2019-07-20 14:37:59
【问题描述】：

我正在使用 FullCalendarV4 和 Vue.js 构建一个交互式日历。我成功地利用 eventRender 回调函数将删除按钮附加到每个动态创建的事件。删除按钮仍然需要功能。为了启用删除事件，我尝试使用 .setAttribute 方法将 onclick 属性附加到按钮以触发针对单个事件的“删除”函数“btn.setAttribute("onclick", 'remove(info)') ; 然后，我尝试在 remove 函数中使用 .removeChild 方法启用删除，但无济于事。有关如何向动态创建的删除按钮添加功能的任何建议？我的代码如下。谢谢！

<template>
  <div class='demo-app'>
    <FullCalendar
      class='demo-app-calendar'
      ref="fullCalendar"
      defaultView="dayGridMonth"
      :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }"
      :plugins="calendarPlugins"
      :weekends="calendarWeekends"
      :events="calendarEvents"
      @dateClick="handleDateClick"
      @eventRender="eventRender"
      @eventClick="remove"
      />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar // make the <FullCalendar> tag available
  },
  data: function() {
    return {
      calendarPlugins: [ // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      calendarWeekends: true,
      calendarEvents: []
    }
  },
  methods: {
    handleDateClick(arg) {
    var newTitle = prompt(arg.dateStr);
      if (newTitle != null) {
        this.calendarEvents.push({
          title: newTitle,
          start: arg.date,
          allDay: arg.allDay
        })
      }
    },
    eventRender(info) {
      var btn = document.createElement("button");
      btn.appendChild(document.createTextNode("x"));
      btn.setAttribute("onclick", 'remove(info)');
      info.el.appendChild(btn);
    },
    remove(info) {
      var task = this.event.currentTarget.parentNode;
      info.el.removeChild(task);
    }
  }
}
</script>

<style lang='scss'>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';

.demo-app {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
}

.demo-app-top {
  margin: 0 0 3em;
}

.demo-app-calendar {
  margin: 0 auto;
  max-width: 900px;
}

</style>

【问题讨论】：

@ittis，感谢您对“如何在 Vue.js 中删除 FullCalendar-4 事件”的帮助。我现在正在尝试向删除按钮添加功能。你有空可以看看这个问题吗？谢谢！

标签： javascript vue.js fullcalendar-4

【解决方案1】：

你可以尝试改变吗

  btn.setAttribute("onclick", 'remove(info)');

到

btn.addEventListener('click', () => {
    info.el.remove()
})

【讨论】：

@ittis，感谢您的回复。我使用了您指示的 addEventListener 方法，但是 this.remove(info) 返回了错误。相反，我在 addEventListener 方法中使用了 info.el.remove() ，这似乎有效，控制台中没有返回错误。可以用吗？