Le plug-in datepicker dans 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. 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的改变
    }
  }
}

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: '',
      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 )
   }
  }

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!