Das Datepicker-Plugin in Vue kann den Wert des Datepicker-Eingabefelds nicht überwachen-js-Tutorial-php.cn

Das Datepicker-Plugin in Vue kann den Wert des Datepicker-Eingabefelds nicht überwachen

亚连

Freigeben： 2018-06-09 11:12:56

Original

1864 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Lösung für das Problem vorgestellt, dass Vue den Wert des Datepicker-Eingabefelds bei Verwendung des Datepicker-Plug-Ins eines Drittanbieters nicht überwachen kann. Interessierte Freunde können darauf verweisen >

1 , Hintergrund

Im Vue-Projekt wird ein Datepicker-Plugin eines Drittanbieters verwendet. Nach der Auswahl des Datums kann Vue die Änderung des Datepicker-Eingabefelds nicht erkennen

 <label class="fl">日期：</label>
 <p class="input-wrapper fr">
  <input class="daterangepicker" ref="datepicker" v-model="dateRange"/>
  <a href="javascript:;" rel="external nofollow" ></a>
 </p>
export default {
  data() {
    return {
      dateRange: &#39;&#39;
    }
  },
  watch: {
    dateRange(newVal, oldVal) {
      console.log(newVal) // 选择日期后无法监听dateRange的改变
    }
  }
}

Nach dem Login kopieren

2. Analyse

Bei der Suche nach Informationen wurde festgestellt, dass Vue Datenänderungen, die durch Plug-Ins von Drittanbietern verursacht werden, tatsächlich nicht überwachen kann. Die obige Methode funktioniert also nicht. Vue stellt uns jedoch eine Methode zur Verfügung, mit der alle Daten in Daten umgewandelt werden können, die von Vue überwacht werden können: vm.$set.

3. Lösung

Nehmen Sie den Datepicker, den ich als Beispiel verwende (jquery-daterangepicker)

data() {
    return {
      date: &#39;&#39;,
      beginDate: &#39;&#39;,
      endDate: &#39;&#39;
    }
  },
mounted () {
  $(&#39;.daterangepicker&#39;).dateRangePicker({
    autoClose: true,
    format: &#39;YYYY-MM-DD&#39;
  }).bind(&#39;datepicker-change&#39;, this.setDate) //插件自带方法，选择日期后触发回调
 },
methods: {
  setDate() {
    let datepicker = this.$refs.datepicker
    //这一步是关键，具体说明可以参见vue api手册
    this.$set(this.date, &#39;beginDate&#39;, datepicker.value)
    this.$set(this.date, &#39;endDate&#39;, datepicker.value)
    this.beginDate = this.date.beginDate.slice(0, 11)
    this.endDate = this.date.endDate.slice(-10)
  }  
 },
  watch: {
  // 这里就可以监听数据变化啦，可以愉快的选择日期了！
   beginDate(newVal, oldVal) {
     this.$emit( &#39;beginDateChange&#39;, newVal )
   },
   endDate(newVal, oldVal) {
     this.$emit( &#39;endDateChange&#39;, newVal )
   }
  }

Nach dem Login kopieren

Das Obige ist, was ich für alle zusammengestellt habe, Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie die Bildvorschaufunktion im WeChat-Applet

So verwenden Sie JQuery, um den Akkordeoneffekt zu implementieren

So verwenden Sie dreistufige Verknüpfungsselektoren in WeChat-Miniprogrammen

PHP-Schließungen und anonyme Funktionen (ausführliches Tutorial)

Über benutzerdefinierte Ereignisse in Vue-Komponenten (ausführliches Tutorial)

Wie man JS verwendet, um den Ball zu implementieren, der der Bewegung der Maus folgt

Das obige ist der detaillierte Inhalt vonDas Datepicker-Plugin in Vue kann den Wert des Datepicker-Eingabefelds nicht überwachen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!