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 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
JavaScript asp.net 获取当前超链接中的文本
Apr 14 Javascript
javascript针对DOM的应用分析(三)
Apr 15 Javascript
js复制到剪切板的实例方法
Jun 28 Javascript
jQuery设置和移除文本框默认值的方法
Mar 09 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
DWR中各种java方法的调用
May 04 Javascript
原生JS实现图片网格式渐显、渐隐效果
Jun 05 Javascript
微信小程序实现点击按钮修改文字大小功能【附demo源码下载】
Dec 06 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
vue使用vant中的checkbox实现全选功能
Nov 17 Vue.js
浅谈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数组函数序列 之array_count_values() 统计数组中所有值出现的次数函数
2011/10/29 PHP
PHP生成自定义长度随机字符串的函数分享
2014/05/04 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
PHP中异常处理的一些方法整理
2015/07/03 PHP
yii2安装详细流程
2018/05/23 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
HTML页面如何象ASP一样接受参数
2007/02/07 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
深入剖析JavaScript中的枚举功能
2014/03/06 Javascript
js中split和replace的用法实例
2015/02/28 Javascript
JavaScript知识点总结之如何提高性能
2016/01/15 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
vue使用axios跨域请求数据问题详解
2017/10/18 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
Nodejs + sequelize 实现增删改查操作
2020/11/07 NodeJs
微信小程序实现分页加载效果
2020/11/19 Javascript
python连接MySQL、MongoDB、Redis、memcache等数据库的方法
2013/11/15 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
Python 'takes exactly 1 argument (2 given)' Python error
2016/12/13 Python
在python中实现强制关闭线程的示例
2019/01/22 Python
Python实现查找二叉搜索树第k大的节点功能示例
2019/01/24 Python
Python数据类型之列表和元组的方法实例详解
2019/07/08 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
写一个函数返回1+2+3+…+n的值(假定结果不会超过长整型变量的范围)
2014/09/05 面试题
设计模式的基本要素是什么
2014/04/21 面试题
演讲稿怎么写才完美
2014/01/02 职场文书
保护母亲河倡议书
2014/04/14 职场文书
党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
2014年扶贫帮困工作总结
2014/12/09 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
React Fragment介绍与使用详解
2021/11/11 Javascript
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript