Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决


Posted in Javascript onJanuary 27, 2018

一、背景

在Vue项目中使用了第三方的datepicker插件,在选择日期后vue无法检测到datepicker输入框的变化

<label class="fl">日期:</label>
 <div class="input-wrapper fr">
  <input class="daterangepicker" ref="datepicker" v-model="dateRange"/>
  <a href="javascript:;" rel="external nofollow" ></a>
 </div>
export default {
  data() {
    return {
      dateRange: ''
    }
  },
  watch: {
    dateRange(newVal, oldVal) {
      console.log(newVal) // 选择日期后无法监听dateRange的改变
    }
  }
}

二、分析

查找资料发现:Vue实际上无法监听由第三方插件所引起的数据变化。因此上面的方法是行不通的。但是,Vue给我们提供的一个方法,它可以将任意数据转化为可以被Vue监听到的数据,他就是:vm.$set。

三、解决

以我用到的datepicker为例(jquery-daterangepicker)

data() {
    return {
      date: '',
      beginDate: '',
      endDate: ''
    }
  },
mounted () {
  $('.daterangepicker').dateRangePicker({
    autoClose: true,
    format: 'YYYY-MM-DD'
  }).bind('datepicker-change', this.setDate) //插件自带方法,选择日期后触发回调
 },
methods: {
  setDate() {
    let datepicker = this.$refs.datepicker
    //这一步是关键,具体说明可以参见vue api手册
    this.$set(this.date, 'beginDate', datepicker.value)
    this.$set(this.date, 'endDate', datepicker.value)
    this.beginDate = this.date.beginDate.slice(0, 11)
    this.endDate = this.date.endDate.slice(-10)
  }  
 },
  watch: {
  // 这里就可以监听数据变化啦,可以愉快的选择日期了!
   beginDate(newVal, oldVal) {
     this.$emit( 'beginDateChange', newVal )
   },
   endDate(newVal, oldVal) {
     this.$emit( 'endDateChange', newVal )
   }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript对内存分配及管理机制详细解析
Nov 11 Javascript
简单的JavaScript互斥锁分享
Feb 02 Javascript
jquery操作select大全
Apr 25 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
微信企业号开发之微信考勤百度地图定位
Sep 11 Javascript
详解javascript中的事件处理
Nov 06 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
Seajs 简易文档 提供简单、极致的模块化开发体验
Apr 13 Javascript
jQuery遍历节点方法汇总(推荐)
May 13 jQuery
基于JavaScript实现留言板功能
Mar 16 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 Javascript
浅谈React中组件间抽象
Jan 27 #Javascript
React Native中NavigatorIOS组件的简单使用详解
Jan 27 #Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 #Javascript
使用D3.js创建物流地图的示例代码
Jan 27 #Javascript
javascript获取图片的top N主色值方法详解
Jan 26 #Javascript
Vue中render方法的使用详解
Jan 26 #Javascript
Angular利用trackBy提升性能的方法
Jan 26 #Javascript
You might like
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
php缩小png图片不损失透明色的解决方法
2013/12/25 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php中文验证码实现方法
2015/06/18 PHP
PHP魔术方法的使用示例
2015/06/23 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
在TP5数据库中四个字段实现无限分类的示例
2019/10/18 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
JQERY limittext 插件0.2版(长内容限制显示)
2010/08/27 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
深入理解Angularjs中的$resource服务
2016/12/31 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
关于vue表单提交防双/多击的例子
2019/10/31 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
2020/09/04 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
python消除序列的重复值并保持顺序不变的实例
2018/11/08 Python
python 图像的离散傅立叶变换实例
2020/01/02 Python
python时间日期操作方法实例小结
2020/02/06 Python
Python实现在Windows平台修改文件属性
2020/03/05 Python
HTML5仿微信聊天界面、微信朋友圈实例代码
2018/01/29 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
英国女装网上商店:I Saw It First
2018/10/18 全球购物
七一表彰活动方案
2014/01/18 职场文书
《听鱼说话》教学反思
2014/02/15 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
讲文明倡议书
2015/04/29 职场文书
婚庆主持词大全
2015/06/30 职场文书
2016年师德师风学习心得体会
2016/01/12 职场文书
详解Vue router路由
2021/11/20 Vue.js
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技