如何使用 Vue Js 和 FullCalendar (EventClick) 显示模态？

Question

我想使用 bootstrap-vue 从 fullcalendar 显示模式。因此，当我单击日历上的事件时，将显示模态。但是我的代码不起作用。

这是我的html代码：

 <div class="flex-fill bd-highlight col-lg-12">
        <div class="card card-default p-3 my-2">
          <full-calendar :event-sources="eventSources" :config="calendarConfig"></full-calendar>
        </div>
      </div>
      <div>
        <b-modal v-model="modalShow">Hello From Modal!</b-modal>
      </div>

这是我的vue代码：

<script>
export default {
  data() {
    return {
      modalShow: false,
      eventId: 0,
      eventSources: [
        {
          events(start, end, timezone, callback) {
            axios.get("http://localhost:8000/api/events").then(response => {
              callback(response.data.data);
            });
          },
          color: "yellow",
          textColor: "black"
        }
      ],
      calendarConfig: {
        defaultView: "month",
        allDaySlot: false,
        locale: "id",
        buttonText: {
          today: "Hari ini",
          month: "Bulanan",
          week: "Mingguan",
          day: "Harian",
          list: "Daftar Kegiatan"
        },
        header: {
          left: "prev,next today",
          center: "title",
          right: "month,agendaWeek,agendaDay list"
        },
        eventClick: function(view) {
          this.modalShow = true;
        }
      }
    };
  }
};
</script>

当我 console.log(this.modalShow) 时，值已从 "false" 更改为 "true"。但是模态没有显示。

Answer 1

这个范围不再是你的 vueContext：

eventClick: function(view) {
   this.modalShow = true;
}

你可以使用绑定解决这个问题：

eventClick: function(view) {
    this.modalShow = true;
}.bind(this)

或者

eventClick(view) => {
    this.modalShow = true;
}

完整的解释在这里：https://www.w3schools.com/js/js_arrow_function.asp

如何使用 Vue Js 和 FullCalendar (EventClick) 显示模态？

How to show modal using Vue Js and FullCalendar (EventClick)?

fullcalendar

bootstrap-modal

vue.js

bootstrap-4

bootstrap-vue