Le plug-in datepicker dans Vue ne peut pas surveiller la valeur de la zone de saisie datepicker-js tutoriel-php.cn

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

1898 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.