Le plug-in datepicker surveille la zone de saisie

Cette fois, je vous apporte la boîte de saisie de surveillance du plug-in datepicker. Quelles sont les précautions pour la boîte de saisie de surveillance du plug-in datepicker. Ce qui suit est un cas pratique, jetons un coup d'œil.

1. Contexte

Un plug-in de sélecteur de date tiers est utilisé dans le projet Vue. Après avoir sélectionné une date, Vue ne peut pas détecter le changement de l'entrée du sélecteur de date. box

 <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: ''
    }
  },
  watch: {
    dateRange(newVal, oldVal) {
      console.log(newVal) // 选择日期后无法监听dateRange的改变
    }
  }
}

2. Analyse

La recherche d'informations a révélé que Vue est en fait incapable de surveiller les modifications de données causées par des plug-ins tiers. La méthode ci-dessus ne fonctionne donc pas. Cependant, Vue nous fournit une méthode qui peut convertir n'importe quelle donnée en données pouvant être surveillées par Vue, à savoir : vm.$set.

3. Solution

Prenons le sélecteur de date que j'utilise comme exemple (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 )
   }
  }

Croyez it Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention à d'autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

Méthode JS pour obtenir les N premières valeurs de couleur d'une image

Explication détaillée de graphiques et texte en utilisant la méthode de rendu

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!