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 ?-js tutoriel-php.cn

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 ?

小云云

Libérer： 2018-05-23 14:17:01

original

3116 Les gens l'ont consulté

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

Copier après la connexion

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: &#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 )
   }
  }

Copier après la connexion

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!