admin 管理员组

文章数量: 1086019

I am making a website that has a select form and datepicker form that sends an API request for data. I want to the update the data on every change of these forms, then a "submit" button is not required.

The select works perfectly by using the "@change", but this does not have any effect on the datepicker.

The template is.

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

And the funtcion looks like this(simplified for example)

methods: {
        get_data() {
            console.log("Change data")
        },
}

I am making a website that has a select form and datepicker form that sends an API request for data. I want to the update the data on every change of these forms, then a "submit" button is not required.

The select works perfectly by using the "@change", but this does not have any effect on the datepicker.

The template is.

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

And the funtcion looks like this(simplified for example)

methods: {
        get_data() {
            console.log("Change data")
        },
}
  • javascript
  • vue.js
  • bootstrap-4
  • vue-ponent
  • bootstrap-vue
Share Improve this question edited Feb 25, 2021 at 21:59 Dan 63.2k18 gold badges111 silver badges119 bronze badges asked Feb 18, 2021 at 0:31 Baldvin BuiBaldvin Bui 731 silver badge5 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 6

The <b-form-datepicker> control has no change event in its event list.

But it does have an input event which gets emitted when updating v-model:

<b-form-datepicker id="first_day_datepicker"
  v-model="first_day"
  :min="min_day"
  :max="max_day"
  class="mb-2"
  @input="get_data()"
/>
<b-form-datepicker id="last_day_datepicker"
  v-model="last_day"
  :min="min_day"
  :max="max_day"
  class="mb-2"
  @input="get_data()"
/>

本文标签： javascriptVue change event not working in ltbformdatepickergtStack Overflow

版权声明：本文标题：javascript - Vue @change event not working in &lt;b-form-datepicker&gt; - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1744085467a2531040.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。