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 相关文章推荐
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
Bootstrap4一次重大更新 几乎涉及每行代码
May 16 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JS实现Cookie读、写、删除操作工具类示例
Aug 28 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
自定义javascript验证框架示例【附源码下载】
May 31 Javascript
Layui表格行工具事件与数据回填方法
Sep 13 Javascript
微信公众号网页分享功能开发的示例代码
May 27 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脚本的10个技巧(1)
2006/10/09 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
js停止输出代码
2008/07/20 Javascript
理解 JavaScript 预解析
2009/10/25 Javascript
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析
2010/03/12 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
js发送短信倒计时的简单实现方法
2016/09/08 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
巧用数组制作图片切换js代码
2016/11/29 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python冒泡排序注意要点实例详解
2016/09/09 Python
利用Opencv中Houghline方法实现直线检测
2018/02/11 Python
python中将\\uxxxx转换为Unicode字符串的方法
2018/09/06 Python
搞清楚 Python traceback的具体使用方法
2019/05/13 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python 并发下载器实现方法示例
2019/11/22 Python
TensorFlow内存管理bfc算法实例
2020/02/03 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
在Mac中配置Python虚拟环境过程解析
2020/06/22 Python
详解KMP算法以及python如何实现
2020/09/18 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
优良学风班申请材料
2014/02/13 职场文书
统计系教授推荐信
2014/02/28 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
vue实现在data里引入相对路径
2022/06/05 Vue.js
Java+swing实现抖音上的表白程序详解
2022/06/25 Java/Android