Maison > interface Web > js tutoriel > le corps du texte

Le plug-in datepicker dans Vue ne peut pas surveiller la valeur de la zone de saisie datepicker

亚连
Libérer: 2018-06-09 11:12:56
original
1853 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. Il a une certaine valeur de référence à laquelle les amis intéressés peuvent se référer

1 , Contexte

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

.
 <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. L'analyse de

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 fonctionnera 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
Ce qui précède est ce pour quoi j'ai compilé. tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter la fonction d'aperçu d'image dans l'applet WeChat

Comment utiliser jquery pour implémenter l'effet accordéon

Comment utiliser les sélecteurs de liaison à trois niveaux dans les mini-programmes WeChat

Fermetures PHP et fonctions anonymes (tutoriel détaillé)

À propos des événements personnalisés dans les composants Vue (tutoriel détaillé)

Comment utiliser JS pour implémenter la balle en suivant le mouvement de la souris

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!