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作用域链使用介绍
Aug 29 Javascript
js改变embed标签src值的方法
Apr 10 Javascript
浅谈jquery上下滑动的注意事项
Oct 13 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
讲解vue-router之什么是嵌套路由
May 28 Javascript
vue实现简单的MVVM框架
Aug 05 Javascript
原生JS实现的简单小钟表功能示例
Aug 30 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
手把手教你写一个微信小程序(推荐)
Oct 17 Javascript
Three.js实现3D机房效果
Dec 30 Javascript
基于JavaScript实现猜数字游戏代码实例
Jul 30 Javascript
JS实现小米轮播图
Sep 21 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+mysql保存和输出文件
2006/10/09 PHP
建立动态的WML站点(二)
2006/10/09 PHP
PHP 文件缓存的性能测试
2010/04/25 PHP
php中使用addslashes函数报错问题的解决方法
2013/02/06 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
PHP模拟asp.net的StringBuilder类实现方法
2015/08/08 PHP
PHP代码维护,重构变困难的4种原因分析
2016/01/25 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
2014/04/10 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
基于jQuery实现简单的折叠菜单效果
2015/11/23 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
JS实现简单的tab切换选项卡效果
2016/09/21 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
javascript中call,apply,callee,caller用法实例分析
2019/07/24 Javascript
Vue仿百度搜索功能
2020/12/28 Vue.js
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
Python实现线程状态监测简单示例
2018/03/28 Python
在Python中给Nan值更改为0的方法
2018/10/30 Python
pandas分别写入excel的不同sheet方法
2018/12/11 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
Python 实现RSA加解密文本文件
2020/12/30 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
澳大利亚实惠时尚女装商店:Katies
2019/06/16 全球购物
专业实习自我鉴定
2013/10/29 职场文书
校长寄语大全
2014/04/09 职场文书
先进学校事迹材料
2014/12/30 职场文书
2016年“六一儿童节”校园广播稿
2015/12/17 职场文书
Go 实现英尺和米的简单单位换算方式
2021/04/29 Golang