记录一个在vue中使用FullCalendar遇到的问题

原文：https://www.cnblogs.com/luhuaixiang/p/10318694.html

这几天在工作中有一个需求——排期表，首先想到的就是使用插件，于是根据需求内容找到了很多基于vue开发的、类似日历的插件，但有的是英文文档不易上手，有的功能上不符合需求，这时候想到了jQuery的日历插件FullCalendar,我是比较反感在vue中使用jquery的，不过暂时这是最好的选择。

　　关于如何在Vue中使用Jquery中的插件，详情我就不介绍了，我的方法很简单，就是把静态资源文件放到static中，在index.html中引入。

　　根据FullCalendar的官方文档（官方文档是英文的，但是搜索可以搜索到不少中文文档），终于成功把数据放到了排期表中（还是比较简单的，api都很清楚）。高兴之余，产品新加了个需求，要求可以模糊查询。这简单啊，我搜索完成之后数据更新下不就好了吗？众所周知，vue是MVVM模式，数据更新DOM也会更新。但是万万没想到事情没有这么简单，重新赋值数据之后页面并没有什么反应，那我就把之前的排期表删了重新生成，但结果还是不如人意，总之在vue的思想上试了很多办法都没有解决。更新数据啊，重新渲染dom啊，都不行，其实这时候关键还是要靠官方文档。

　　我在 https://blog.csdn.net/qw_xingzhe/article/details/44920943 这篇文章中找到了关于事件的一些API：

于是开始尝试，尝试的过程就不多啰嗦了，总之，我成功的方法是这样写的，

$('#calendar').fullCalendar( 'removeEventSource',this.events);

$('#calendar').fullCalendar( 'refetchEvents');

$('#calendar').fullCalendar( 'addEventSource', arr);

在搜索完成后台返回完数据，我先会把原来绑定在插件上的数据删除，然后在重新渲染插件上的时间，最后把新的数据绑定到插件上，解决。

好像第二条也不是很需要。

　　在使用一个新的插件的时候，一定要好好参考该插件的API，这样会少使你走很多弯路。虽然我自己最不喜欢看API，从这次事件就能看出来，所以我希望记录下来给自己一个教训，给你们一次提醒。第一次写，感觉废话连篇。而且我是一个小白，如有路过的大牛请随便指点。