vue.js - Why doesn't Element UI datepicker component update its value until I cick again?

Question

I am using an el-datepicker component to filter a list of items on an el-table according to their dates. When I select a new date range, the filter works correctly but the datepicker element does not update to the new dates I selected until I click it again. Has anyone faced this problem before?

<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"
/>

Then in the methods of my component:

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

So the datepicker gets its value from filters.start_date. The thing is, if I do console.log(this.filters.start_date), it shows the correct date range (the one I just selected). However the datepicker does not show that date range until I click again.

Answer 1

The problem is that you are binding the value i.e. using :value instead of v-model. So if you binding the value you have to assign the value to the data by yourself such that it causes reactiveness and hence updates the DOM.

If I with your approach of going with the binding value I would like to change my code something like this:

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

Notice I have changed the filters.start_date to filters_date_range, as the value for type=daterange takes an array with two items. something like [startDate, endDate]

Another thing that you should notice is I removed the parameters from updateFilters, because I want to receive the latest daterange whenever it gets selected.

Now in my handler function I just need to do:

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

    //data : [startDate, endDate]
}

And, it will update the DOM as soon as u change the picker value.

Another easier approach would be to use v-model instead of :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"
/>

And it will update the DOM automatically, you don't have to set the value explicitly in the input handler, and can do any other stuff in the handler if you want to.