Select2 - "on change" event is not working

[TinnSoft]

Hello

Not having success with the integration of select2 component inside a Vue JS app, specifically with the on change event.

I am having the following issues:

1. After adding the :change event on a specific object, seems that all of the select2 objects takes its properties (in the example of fiddle you can run test and check how it works), so as you can see the alert message I put, is being displayed.
2. Once added new rows and try to select a product from the list, seems that it is calling many times the function onchange.

What I want?

• When an user choose a product, the price of selected item must be filled automatically

From my research in another threads, I found that it's not possible to call Vue JS DOM events directly just for wrapped components because they have its own events.

If this issue looks familiar for someone here, please comment.

Many thanks.

[deniskoronets]

https://vuejs.org/v2/examples/select2.html

actually all you need is here: $(...) .select2() .on('change', function () { vm.$emit('input', this.value) // emitting Vue change event })

[kd8ssq]

If I understand @TinnSoft, the on-change event is firing multiple times. You can see it in his fiddle and if you go to the vuejs example for select2, view the fiddle and add an on change event to the drop down, you'll see it fires twice as well. I'm seeing the same problem in my code.