快捷導(dǎo)航

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

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

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

一、背景

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

二、分析

查找資料發(fā)現(xiàn)：Vue實(shí)際上無(wú)法監(jiān)聽(tīng)由第三方插件所引起的數(shù)據(jù)變化。因此上面的方法是行不通的。但是，Vue給我們提供的一個(gè)方法，它可以將任意數(shù)據(jù)轉(zhuǎn)化為可以被Vue監(jiān)聽(tīng)到的數(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)鍵，具體說(shuō)明可以參見(jià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)聽(tīng)數(shù)據(jù)變化啦，可以愉快的選擇日期了！
   beginDate(newVal, oldVal) {
     this.$emit( 'beginDateChange', newVal )
   },
   endDate(newVal, oldVal) {
     this.$emit( 'endDateChange', newVal )
   }
  }

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

您可能感興趣的文章:

相關(guān)文章

22個(gè)Vue優(yōu)化技巧(項(xiàng)目實(shí)用)
演示代碼使用 Vue3 + ts + Vite 編寫(xiě)，但是也會(huì)列出適用于 Vue2 的優(yōu)化技巧，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-09-09
3分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用
這篇文章主要介紹了3分鐘搞定vite項(xiàng)目(vue/react)使用vite-plugin-pwa配置為pwa應(yīng)用,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-02-02
Vue后臺(tái)中優(yōu)雅書(shū)寫(xiě)狀態(tài)標(biāo)簽的方法實(shí)例
在Vue中,我們可以非常便捷地通過(guò)標(biāo)簽實(shí)現(xiàn)狀態(tài)的保存,這篇文章主要給大家介紹了關(guān)于Vue后臺(tái)中如何優(yōu)雅的書(shū)寫(xiě)狀態(tài)標(biāo)簽的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-08-08
vue3+ts封裝axios實(shí)例以及解決跨域問(wèn)題
在前端開(kāi)發(fā)中,使用axios進(jìn)行數(shù)據(jù)請(qǐng)求是常見(jiàn)的做法,封裝axios可以統(tǒng)一請(qǐng)求頭處理、方便接口管理、配置多攔截器等,提高代碼的可維護(hù)性和重用性,本文詳細(xì)記錄了axios的封裝過(guò)程,包括安裝、配置跨域處理、接口管理文件的創(chuàng)建等
2024-09-09
vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼
這篇文章主要介紹了vue3自定義確認(rèn)密碼匹配驗(yàn)證規(guī)則的操作代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
vue登錄頁(yè)實(shí)現(xiàn)使用cookie記住7天密碼功能的方法
這篇文章主要介紹了vue登錄頁(yè)實(shí)現(xiàn)使用cookie記住7天密碼功能的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02
vue keepAlive緩存清除問(wèn)題案例詳解
這篇文章主要介紹了vue keepAlive緩存清除問(wèn)題案例詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-09-09
Vite3遷移Webpack5的實(shí)現(xiàn)
本文主要介紹了Vite3遷移Webpack5的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
vue+Ant?Design進(jìn)度條滑塊與input聯(lián)動(dòng)效果實(shí)現(xiàn)
最近接到這樣一個(gè)需求滑塊進(jìn)度與輸入框?yàn)橐恢?默認(rèn)值為80,最小不能小于30,最大為100，怎么實(shí)現(xiàn)這個(gè)聯(lián)動(dòng)效果呢，下面小編給大家分享下基于vue+Ant?Design進(jìn)度條滑塊與input聯(lián)動(dòng)效果的實(shí)現(xiàn)，感興趣的朋友跟隨小編一起看看吧
2022-12-12
vue項(xiàng)目fetch本地PAG格式文件404 NotFound的解決
這篇文章主要介紹了vue項(xiàng)目fetch本地PAG格式文件404 NotFound的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10