Vue: select2 v-on:change="method" not firing

[brianvoe]

I am using select2 v4.0 and i used the directive example given in your guide but i also added an v-on:change="method" to that element and its not firing the function. Data is changing and everything else looks to be working just fine.

[yyx990803]

v-on only listens to native DOM events, but select2 only fires jQuery change events, not native events. This has been a known issue but it's really select2's problem for not firing native change events. You can just call your method in the custom directive where you do $(this.el).on('change', ...)

[brianvoe]

Can you inform me on how i would do that, have been trying to figure it out for too long? Is there a way to trigger a native change?

[smolinari]

http://vuejs.org/guide/custom-directive.html

Scott

[hesan-aminiloo]

@brianvoe
Hi. You can $emit the change event in mounted() method of the select2 component like this :

vm.$emit('change')

[abdrzakoxa]

1
2
3

const self = this;
$("select").change(function () {
const val = $(this).find("option:selected").val();
self.selected = val;
});

[brianvoe]

It's funny how old this thread is. I ended up building my own select drop-down cause of all the frustrations I was having with select2 and chosen. slimselectjs.com let me know what you think.

[coisox]

This is how I do:

<select v-model="selected" onchange="this.dispatchEvent(new Event('change'))">

source: https://stackoverflow.com/questions/16250464/trigger-change-event-when-the-input-value-changed-programmatically

[carlosmolano]

This is the solution:

http://jsfiddle.net/carlosmolano/8qa215w7/11/

[marcoValkyriweb]

This is older but still a top hit, my solution for mdb-select in a template was:
@change="$emit('change', optionsArray)"
And then you when you call the template piece, you can have the @change there and just use a quick filter/find for selected being true.