在后端管理项目中使用vue来进行前端项目的开发,但我们都知道Vue实际上无法监听由第三方插件所引起的数据变化。也无法获得JQuery这样的js框架对元素值的修改的。而日期控件daterangepicker又基于JQuery来实现的。
因此,在实践中会出现在日期控件中点击修改了日期,而无法通过vue来获得对应的值。
下面来说一下其中一种解决方案:主动触发Event事件。以下为相关内容的部分代码。
首先引入日期控件daterangepicker相关依赖的js和css。
当然,上面还需要引入jQuery相关的框架。
在页面的指定位置添加日期控件的input。
这里痛v-model与vue中的openDate想绑定,但在后面js中不做特殊处理,是无法通过vue拿到该字段的值的。
js中初始化日期控件及触发DOM对象上的原生input事件。
需要特别注意的就是最后on方法中对hide.daterangepicker事件进行处理,在处理的方法中手动触发时间。
而至于该input的openDate属性在vue中的相关代码如下:
至此,日期控件可正确相应,并且vue也能够拿到日期控件中值的变化。