javascript - Vue 全日历,打开 . 事件点击的模态
问题描述
我已经成功地让事件点击与 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>
解决方案
这是脚本部分的简化版本:
export default {
data() {
return {
showModal: false,
};
},
methods: {
eventClick() {
this.showModal = true;
},
},
};
主要变化:
methods
代替Methods
this.showModal
代替showModal
推荐阅读
- sql - 来自拥有 5000 万用户的 SQL 数据库的快速用户名密码匹配
- javascript - FabricJS多边形高度宽度不增加对象大小但边界框
- c# - 每个文件在 ASP.NET MVC 站点上的初始加载都很慢
- echo - 回声计数器总是在同一个屏幕位置?
- r - ggplot2中构面的组标题标签
- json - D3 v5缩放控制气泡图json异步数据
- powershell - 为什么这不在目标服务器上创建文件?
- java - 在WebDriver中用图标图像分隔时如何从段落中提取文本段
- java - 禁用 PathVariables 的 feign 编码
- chart.js - 具有时间轴和多个数据集的 ChartJS 工具提示