I am in the process of developing a website with both a select form and a datepicker form that will send an API request for data. I aim to have the data update dynamically whenever there is a change in either of these forms, thereby eliminating the need for a traditional "submit" button.
The select form operates smoothly using the "@change" event handler, however, the datepicker does not respond to this method.
Below shows the template structure:
<div class="d-flex flex-row flex-nowrap">
<b-form-select v-model="region"
:options="regions"
class="select_box"
@change="get_data()"
/>
<b-form-datepicker id="first_day_datepicker"
v-model="first_day"
:min="min_day"
:max="max_day"
class="mb-2"
@change="get_data()"
/>
<b-form-datepicker id="last_day_datepicker"
v-model="last_day"
:min="min_day"
:max="max_day"
class="mb-2"
@on-change="get_data()"
/>
</div>
Here is an example of how the function should look (simplified):
methods: {
get_data() {
console.log("Change data")
},
}