source

bootstrap-vue: b-form-datepicker가 정지될 때까지 v-모델로 업데이트되지 않음

factcode 2022. 8. 27. 09:23
반응형

bootstrap-vue: b-form-datepicker가 정지될 때까지 v-모델로 업데이트되지 않음

사용하고 있다b-form-datepicker그리고 선택한 날짜를 기본 상태로 재설정하는 추가 버튼을 사용하고 싶습니다.이 버튼을 누르면 다른 날짜 선택기, 입력 양식 및 드롭다운 다중 선택도 재설정됩니다.이 기능은 정상적으로 구현되어 있습니다만, 리셋을 클릭해도 날짜 피커가 즉시 갱신되지 않고, 일시정지 또는 클릭이 되어 있는 경우에만 갱신됩니다.

표시는 다음과 같습니다.

<b-btn
  variant="primary"
  class="mr-2"
  @click="resetSearch"
>
  <font-awesome-icon
    icon="undo"
    class="mr-sm-1"
  />
  <span class="d-sm-inline-block d-none">Reset</span>
</b-btn>

<b-form-datepicker
  id="minDate"
  v-model="minDate"
  size="lg"
  today-button
  close-button
  start-weekday="1"
  value-as-date
  locale="en-GB"
/>

<b-form-datepicker
  id="maxDate"
  v-model="maxDate"
  size="lg"
  today-button
  close-button
  start-weekday="1"
  value-as-date
  locale="en-GB"
/>

처음에 모델을 이렇게 설정했습니다.

created () {
  this.minDate = this.$moment().subtract(5, 'years').toDate()
  this.maxDate = this.$moment().toDate()
  this.dataLoaded = true
}

이거는resetSearch방법

resetSearch () {
  this.publicationsSearchKeyword = ''
  this.minDate = this.$moment().subtract(5, 'years').toDate()
  this.maxDate = this.$moment().toDate()
  this.publicationsListValue = []
}

다음은 코드펜입니다.https://codepen.io/BBA278/pen/vYOxBgz

리셋 버튼을 클릭했을 때 선택한 날짜를 즉시 업데이트하려면 어떻게 해야 합니까?

이 건에 대한 이슈를 오픈하기 위해 github 저장소로 갔습니다.그러나 유사한 문제가 목록 맨 위에 있었습니다. Datepicker가 해당 값을 가리키지 않으면 값을 업데이트하지 않습니다.

당김 요청으로 수정되었다고 합니다.

사실 이것은 PR #4824에 수정되어 있습니다.

v.2.6.0에서는 수정될 수 있습니다.

업데이트:

부트스트랩 v2.6.0은 2020년 3월 5일에 출시되었으며 이 문제의 버그 수정을 포함하고 있습니다.

버그 수정 v2.6.0

b-form-date-picker: MacOS에서 Firefox 및 Safari에 대한 메뉴 포커스 처리 및 v-model 업데이트 문제(#4814, #4827)(#4824) 수정(09fa920)

언급URL : https://stackoverflow.com/questions/60397593/bootstrap-vue-b-form-datepicker-doesnt-update-to-v-model-until-its-hovered

반응형