Question

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

这是我的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;
}

您可以通过使用bind解决此问题：

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）显示模态？

1 个答案: