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之卸载鼠标事件的代码
May 14 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
js实现数组冒泡排序、快速排序原理
Mar 08 Javascript
js实现各种复制到剪贴板的方法(分享)
Oct 27 Javascript
Vue底层实现原理总结
Feb 17 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
基于Angular 8和Bootstrap 4实现动态主题切换的示例代码
Feb 11 Javascript
Javascript操作select控件代码实例
Feb 14 Javascript
JavaScript享元模式原理与用法实例详解
Mar 09 Javascript
vue实现前端列表多条件筛选
Oct 26 Javascript
JavaScript实现点击切换功能
Jan 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生成文件
2007/01/15 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
php比较相似字符串的方法
2015/06/05 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
PHP守护进程化在C和PHP环境下的实现
2017/11/21 PHP
php实现在线考试系统【附源码】
2018/09/18 PHP
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
模拟select的代码
2011/10/19 Javascript
js实现异步循环实现代码
2016/02/16 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
[54:02]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 IG vs VGJ.T
2018/04/03 DOTA
python k-近邻算法实例分享
2014/06/11 Python
Python实现的排列组合计算操作示例
2017/10/13 Python
一篇文章搞懂Python的类与对象名称空间
2018/12/10 Python
python 使用plt画图,去除图片四周的白边方法
2019/07/09 Python
python绘制玫瑰的实现代码
2020/03/02 Python
使用python无账号无限制获取企查查信息的实例代码
2020/04/17 Python
使用keras实现BiLSTM+CNN+CRF文字标记NER
2020/06/29 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
医生实习工作总结的自我评价
2013/09/27 职场文书
生物制药毕业生自荐信
2013/10/16 职场文书
迟到检讨书大全
2014/01/25 职场文书
实习老师离校感言
2014/02/03 职场文书
餐饮营销方案
2014/02/23 职场文书
学历公证委托书
2014/04/09 职场文书
学校教学工作总结2015
2015/05/19 职场文书
青春雷锋观后感
2015/06/10 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
Vue 打包后相对路径的引用问题
2022/06/05 Vue.js