当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决

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

2018年01月29日  | 移动技术网IT编程  | 我要评论

花都夜总会,哈起码a,睢县人民政府网

一、背景

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

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网