Maison  >  Article  >  interface Web  >  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 ?

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 ?

小云云
小云云original
2018-05-23 14:17:013113parcourir

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

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn