Vue 完整日历，打开 . 事件点击时的模式

Question

我已经成功地在使用 Vue FullCalendar 时获得了事件点击，但我正在尝试使用该垫脚石，让它在点击事件时打开一个模式。

我现在所拥有的是给我showModal is not defined

我哪里出错了？

<FullCalendar 
@eventClick="eventClick"
/>

<script type="text/x-template" id="modal-template">
<transition name="modal">
<div class="modal-mask">
<div class="modal-wrapper">
<div class="modal-container">
<div class="modal-header">
<slot name="header">
default header
</slot>
</div>
<div class="modal-body">
<slot name="body">
default body
</slot>
</div>
<div class="modal-footer">
<slot name="footer">
default footer
<button class="modal-default-button" @click="$emit('close')">
OK
</button>
</slot>
</div>
</div>
</div>
</div>
</transition>
</script>
<modal v-if="showModal" @close="showModal = false">
<!--
you can use custom content here to overwrite
default content
-->
<h3 slot="header">custom header</h3>
</modal>


<script>
Vue.component('modal', {
template: '#modal-template'
})
export default {
data () {
return {
events: [
],
showModal: false
}
},
Methods:{
eventClick: function(e) {
var eventObj = e.event;
showModal = true;
//alert('Clicked ' + eventObj.title);
let element = this.$refs.modal.$el;
$(element).modal('show');
} 
},
</script>

Answer 1

下面是脚本部分的简化版本：

export default {
data() {
return {
showModal: false,
};
},
methods: {
eventClick() {
this.showModal = true;
},
},
};

主要变化：

• methods而不是Methods
• this.showModal而不是showModal