Vue引用第三方datepicker插件無法監(jiān)聽datepicker輸入框的值的解決

更新時(shí)間：2018年01月27日 14:38:00 作者：tian0o0

這篇文章主要介紹了Vue引用第三方datepicker插件無法監(jiān)聽datepicker輸入框的值的解決，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一、背景

在Vue項(xiàng)目中使用了第三方的datepicker插件，在選擇日期后vue無法檢測(cè)到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) // 選擇日期后無法監(jiān)聽dateRange的改變
    }
  }
}

二、分析

查找資料發(fā)現(xiàn)：Vue實(shí)際上無法監(jiān)聽由第三方插件所引起的數(shù)據(jù)變化。因此上面的方法是行不通的。但是，Vue給我們提供的一個(gè)方法，它可以將任意數(shù)據(jù)轉(zhuǎn)化為可以被Vue監(jiān)聽到的數(shù)據(jù)，他就是：vm.$set。

三、解決

以我用到的datepicker為例（jquery-daterangepicker）

data() {
    return {
      date: '',
      beginDate: '',
      endDate: ''
    }
  },
mounted () {
  $('.daterangepicker').dateRangePicker({
    autoClose: true,
    format: 'YYYY-MM-DD'
  }).bind('datepicker-change', this.setDate) //插件自帶方法，選擇日期后觸發(fā)回調(diào)
 },
methods: {
  setDate() {
    let datepicker = this.$refs.datepicker
    //這一步是關(guān)鍵，具體說明可以參見vue api手冊(cè)
    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: {
  // 這里就可以監(jiān)聽數(shù)據(jù)變化啦，可以愉快的選擇日期了！
   beginDate(newVal, oldVal) {
     this.$emit( 'beginDateChange', newVal )
   },
   endDate(newVal, oldVal) {
     this.$emit( 'endDateChange', newVal )
   }
  }

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中的計(jì)算屬性傳參
這篇文章主要介紹了vue中的計(jì)算屬性傳參，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue項(xiàng)目中錨點(diǎn)定位替代方式
今天小編就為大家分享一篇vue項(xiàng)目中錨點(diǎn)定位替代方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
通過vue寫一個(gè)瀑布流插件代碼實(shí)例
這篇文章主要介紹了通過vue寫一個(gè)瀑布流插件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
解決vue-pdf的簽章不顯示問題記錄
文章介紹了使用vue-pdf@4.3.0時(shí)遇到的上傳特殊PDF文件無法正常預(yù)覽的問題,通過查看控制臺(tái)報(bào)錯(cuò)信息,發(fā)現(xiàn)是因?yàn)槿鄙僮煮w導(dǎo)致的,解決方法是修改pdfjs-dist庫的代碼,注釋掉隱藏電子簽章的代碼,為了在生產(chǎn)環(huán)境中應(yīng)用這個(gè)修改,使用了patch-package插件,感興趣的朋友一起看看吧
2024-11-11
vue插槽slot的簡單理解與用法實(shí)例分析
這篇文章主要介紹了vue插槽slot的簡單理解與用法,結(jié)合實(shí)例形式分析了vue插槽slot的功能、原理、相關(guān)使用技巧與操作注意事項(xiàng),需要的朋友可以參考下
2020-03-03
vue實(shí)現(xiàn)帶復(fù)選框的樹形菜單
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶復(fù)選框的樹形菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-05-05
Vue3中watch無法監(jiān)聽的解決辦法
本文主要介紹了Vue3中watch無法監(jiān)聽的解決辦法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-05-05
vue實(shí)現(xiàn)圖片路徑轉(zhuǎn)二進(jìn)制文件流(binary)
這篇文章主要介紹了vue實(shí)現(xiàn)圖片路徑轉(zhuǎn)二進(jìn)制文件流(binary)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue如何使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩
這篇文章主要介紹了vue如何使用mapbox對(duì)當(dāng)前行政區(qū)劃進(jìn)行反選遮罩問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue車牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)
這篇文章主要介紹了vue車牌號(hào)校驗(yàn)和銀行校驗(yàn)實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2019-01-01