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

Question

I wanna show Modal from fullcalendar using bootstrap-vue. So when I click event on calendar, the modal will be show. But my code does't work.

This is my html code:

 <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>

This is my vue code:

<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>

When I console.log(this.modalShow) the value has been change form "false" to "true". But the modal is not showing.

dreijntjens dreijntjens · Accepted Answer · 2019-09-05T10:08:24

The scope of this is not your vueContext anymore:

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

you can solve this by using bind:

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

Or

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

Full explanation is overhere: https://www.w3schools.com/js/js_arrow_function.asp

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

1 Answers