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 原型模式实现OOP的再研究
Apr 09 Javascript
在浏览器中获取当前执行的脚本文件名的代码
Jul 19 Javascript
Get中文乱码IE浏览器Get中文乱码解决方案
Dec 26 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
jQuery中insertAfter()方法用法实例
Jan 08 Javascript
使用pjax实现无刷新更改页面url
Feb 05 Javascript
JavaScript文本框脚本编写的注意事项
Jan 25 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
微信公众号开发 实现点击返回按钮就返回到聊天界面
Dec 15 Javascript
浅谈Angular路由复用策略
Oct 04 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 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
解析dedecms空间迁移步骤详解
2013/05/15 PHP
javascript转换字符串为dom对象(字符串动态创建dom)
2010/05/10 Javascript
jQuery UI Dialog 创建友好的弹出对话框实现代码
2012/04/12 Javascript
javascript简单性能问题及学习笔记
2014/02/04 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
用原生JS获取CLASS对象(很简单实用)
2014/10/15 Javascript
浅析Bootstrap表格的使用
2016/06/23 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
基于JavaScript实现自定义滚动条
2017/01/25 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
浅谈vue限制文本框输入数字的正确姿势
2019/09/02 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
浅谈javascript如何获取文件后缀名
2020/08/07 Javascript
详解Python中的元组与逻辑运算符
2015/10/13 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
Python中url标签使用知识点总结
2020/01/16 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
大学生实习期自我评价范文
2013/10/03 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
小学校长竞聘演讲稿
2014/05/16 职场文书
美国留学经济担保书
2014/05/20 职场文书
信用卡工作证明模板
2014/09/14 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
公安四风对照检查材料思想汇报
2014/10/11 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
实施意见格式范本
2015/06/05 职场文书
《玩出了名堂》教学反思
2016/02/17 职场文书
七年级作文之英语老师
2019/10/28 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记