다시 클릭할 때까지 요소 UI 날짜 선택기 구성 요소가 값을 업데이트하지 않는 이유는 무엇입니까?

다시 클릭할 때까지 요소 UI 날짜 선택기 구성 요소가 값을 업데이트하지 않는 이유는 무엇입니까?

사용 중입니다.el-datepicker구성 요소 - 의 항목 목록을 필터링el-table그들의 연대순으로새 날짜 범위를 선택하면 필터가 올바르게 작동하지만 다시 클릭할 때까지 날짜 선택기 요소가 선택한 새 날짜로 업데이트되지 않습니다.이전에 이 문제에 직면한 적이 있는 사람이 있습니까?

<el-date-picker
    size="mini"
    :value="filters.start_date"
    @input="updateFilters({ value: $item, prop: 'start_date' })"
    value-format="yyyy-MM-dd"
    format="MMMM dd, yyyy"
    type="daterange"
    align="right"
/>

그러면 내 구성 요소의 방법으로:

updateFilters(data) {
    this.$store.commit('panel/changeFilters', data)
    ...
}

따라서 날짜 선택기는 다음에서 값을 얻습니다.filters.start_date중요한 건, 만약 내가console.log(this.filters.start_date)올바른 날짜 범위(방금 선택한 날짜 범위)가 표시됩니다.그러나 날짜 선택기는 다시 클릭할 때까지 해당 날짜 범위를 표시하지 않습니다.

문제는 사용자가 값을 바인딩하고 있다는 것입니다.:value대신에v-model따라서 값을 바인딩하면 데이터에 값을 직접 할당하여 반응성을 유발하여 DOM을 업데이트해야 합니다.

바인딩 값을 사용하는 당신의 접근 방식에 따라 코드를 다음과 같이 변경하고 싶습니다.

<el-date-picker
    size="mini"
    :value="filters.date_range"
    @input="updateFilters"
    value-format="yyyy-MM-dd"
    format="MMMM dd, yyyy"
    type="daterange"
    align="right"
/>

변경한 내용을 확인합니다.filters.start_date로.filters_date_range의 가치로서type=daterange두 개의 항목이 있는 배열을 사용합니다.비슷한 것[startDate, endDate]

또 하나 주목해야 할 것은 다음에서 매개 변수를 제거했다는 것입니다.updateFilters왜냐하면 선택될 때마다 최신 날짜 범위를 받고 싶기 때문입니다.

이제 핸들러 기능에서 다음 작업만 수행하면 됩니다.

updateFilters(data) {
    this.$store.commit('panel/changeFilters', data)
    this.filters.date_range = data

    //data : [startDate, endDate]
}

그리고 선택기 값을 변경하는 즉시 DOM을 업데이트합니다.

다른 더 쉬운 접근법은v-model대신에:value.

<el-date-picker
    size="mini"
    v-model="filters.date_range"
    @input="updateFilters"
    value-format="yyyy-MM-dd"
    format="MMMM dd, yyyy"
    type="daterange"
    align="right"
/>

그러면 DOM이 자동으로 업데이트되고, 입력 핸들러에서 값을 명시적으로 설정할 필요가 없으며, 원하는 경우 핸들러에서 다른 작업을 수행할 수 있습니다.

언급URL : https://stackoverflow.com/questions/65635113/why-doesnt-element-ui-datepicker-component-update-its-value-until-i-cick-again