Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决

一、背景

在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 )
   }
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

您可能感兴趣的文章:

  • 使用Vue写一个datepicker的示例
赞 (0)

相关推荐

  • 使用Vue写一个datepicker的示例

    前言 写插件是很有意思,也很锻炼人,因为这个过程中能发现许多的细节问题.在前端发展的过程中,jQuery无疑是一个重要的里程碑,围绕着这个优秀项目也出现了很多优秀的插件可以直接使用,大大节省了开发者们的时间.jQuery最重要的作用是跨浏览器,而现在浏览器市场虽不完美,但已远没有从前那么惨,数据驱动视图的思想倍受欢迎,大家开始使用前端框架取代jQuery,我个人比较喜欢Vue.js,所以想试着用Vue.js写一个组件出来. 为了发布到npm上,所以给项目地址改名字了,但是内部代码没有改,使用方法

  • Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决

    一.背景 在Vue项目中使用了第三方的datepicker插件,在选择日期后vue无法检测到datepicker输入框的变化 <label class="fl">日期:</label> <div class="input-wrapper fr"> <input class="daterangepicker" ref="datepicker" v-model="dateRang

  • 解决vue bus.$emit触发第一次$on监听不到问题

    $emit与emit与emit与 $on的用法 新建bus.js import Vue from 'vue' export const bus = new Vue() 引用bus.js import {bus} from './bus' bus.$on('test', function (msg) { console.log(msg) }) bus.$emit('test', 11) bus.$emit触发第一次emit触发第一次emit触发第一次 $on监听不到 因为$emit 先于 $on

  • Bootstrap教程JS插件滚动监听学习笔记分享

    Bootstrap教程JS插件滚动监听学习笔记分享

    本文主要来学习一下JavaScript插件--滚动监听. 1.案例 滚动监听插件可以根据滚动条的位置自动更新所对应的导航标记.你可以试试滚动这个页面,看看左侧导航的变化. 先把实现的代码上了,你可以通过测试代码先来看看效果. <!DOCTYPE html> <html> <head> <title>Bootstrap</title> <meta name="viewport" content="width=de

  • vue使用element-ui的el-input监听不了回车事件的解决方法

    原因 今天在使用element-ui时,el-input组件监听不了回车事件,如下代码没有想要的效果: <el-input class="search-input" placeholder="请输入内容" v-model="searchText" @keyup.enter="search()"></el-input> 原因应该是element-ui自身封装了一层input标签之后影响了事件的监听,在el

  • vue watch监听对象及对应值的变化详解

    如下所示: var vm=new Vue({ data:{ a:1, b:{ c:1 } }, watch:{ a(val, oldVal){//普通的watch监听 console.log("a: "+val, oldVal); }, b:{//深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console.log("b.c: "+val.c, oldVal.c);//但是这两个值打印出来却都是一样的 }, deep:true }

  • 使用vue.js在页面内组件监听scroll事件的方法

    思路:scroll在哪儿个组件内,就在获取那个dom元素.网上好多思路是 window.addEventListener("scroll", function(){ console.log('scrolling'); }); 这是监听不到的!如果你整个网页可以滑动,或许还可以试试! 对于像我这样,只在页面的内的一个div内要监听的. 实现代码如下: 第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素 <!--设备列表

  • vue select选择框数据变化监听方法

    1.使用v-model在select标签上进行数据双向绑定, 2.在data里边添加val:' ', 3.最后就是监听事件的写法,写在methods之外. 附加:(以下图片借鉴他人,非原创) 以上这篇vue select选择框数据变化监听方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 解决Vue.js父组件$on无法监听子组件$emit触发事件的问题

    最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1.vuejs API 2.解决实例 问题分析 1.之前写的自定义组件事件触发为this.$emit("myclick",this.todo.text);,这样this指的是todo-item的每一项,而最后vm.$on监听的是app组件,也就出说监听的是父节点,而触发的是子节点,故监听不到这个事件的. 解决思路 1.将触发事件放在父节点上触发,就可以监听到触发的事件了,

  • vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    vue.js过滤器+ajax实现事件监听及后台php数据交互实例

    本文实例讲述了vue.js过滤器+ajax实现事件监听及后台php数据交互.分享给大家供大家参考,具体如下: 在vue.js开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. index.html: <!doctype html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title> v

  • vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例

    最终效果如下:(注意需要做锚点联动的部分并不在页面的顶部而是页面的某个div内)-chrome 完成这个功能需要注意: 1.点击导航平滑滚动到导航内容处 2.div内滚动时当前导航需要做响应 代码如下: 1.html结构(因为从项目里截取代码数据内容就不贴出来了,不算难点,这个可以根据自己的项目进行调整,相应的方法和类名别弄错就行) <div class="all-title"> 全部应用 <p class="fr"> <span v-

随机推荐