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

Question

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

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

当我控制台.log(this.modalShow(时，该值已从"假"更改为"真"。但是模态没有显示。

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