datepicker 플러그인은 입력 상자를 모니터링합니다.

이번에는 입력 상자를 모니터링하는 datepicker 플러그인을 가져왔습니다. 입력 상자를 모니터링하는 datepicker 플러그인의 주의 사항은 무엇입니까? 다음은 실제 사례입니다.

1. 배경

Vue 프로젝트에서 타사 날짜 선택기 플러그인이 사용됩니다. 날짜를 선택한 후 Vue는 날짜 선택기 입력 상자의 변경 사항을 감지할 수 없습니다.

 <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: ''
    }
  },
  watch: {
    dateRange(newVal, oldVal) {
      console.log(newVal) // 选择日期后无法监听dateRange的改变
    }
  }
}

2. 분석

찾기 정보 및 발견: Vue 실제 타사 플러그인으로 인한 데이터 변경 사항은 모니터링할 수 없습니다. 따라서 위의 방법은 작동하지 않습니다. 그러나 Vue는 모든 데이터를 Vue에서 모니터링할 수 있는 데이터로 변환할 수 있는 방법(vm.$set)을 제공합니다.

3. 솔루션

제가 사용한 datepicker를 예로 들어보세요(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 )
   }
  }

이 기사의 사례를 읽으신 후 방법을 익히셨을 것으로 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사를 확인해보세요!

추천 자료:

이미지의 상위 N개 색상 값을 얻는 JS 방법

렌더링 방법을 사용하여 이미지와 텍스트에 대한 자세한 설명

위 내용은 datepicker 플러그인은 입력 상자를 모니터링합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!