Que dois-je faire si le plug-in Datepicker de référence Vue ne peut pas surveiller la valeur de la zone de saisie Datepicker ?

Cet article présente principalement la solution au problème selon lequel Vue ne peut pas surveiller la valeur de la zone de saisie datepicker lors de l'utilisation du plug-in tiers datepicker. J'espère qu'il a une certaine valeur de référence. peut aider tout le monde.

1. Contexte

Un plug-in de sélecteur de date tiers est utilisé dans le projet Vue. Après avoir sélectionné la date, Vue ne peut pas détecter. la zone de saisie du sélecteur de date Modifications

 <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的改变
    }
  }
}

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 tiers. plug-ins de fête. 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 )
   }
  }

Recommandations associées :

Explication détaillée du sélecteur de date de l'interface utilisateur jQuery Datepicker

Explication détaillée de la façon d'utiliser le sélecteur de date d'amorçage du contrôle JS (photo)

Tutoriel php appelant My97DatePicker_PHP

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!