sl-change event bound to vuejs markup doesn't trigger

[Devmond]

Describe the bug

This will not fire.

<sl-select @sl-change="alert('changed')">
    <sl-option value="one">one</sl-option>
    <sl-option value="two">two</sl-option>
 </sl-select>

Adding the event via javascript as a non-vue component works. The click event works but sl-change won't fire on anything, same result on text field.

[KonnorRogers]

@Devmond Do you have a reproduction?

It seems to work here unless im missing something:

https://stackblitz.com/edit/vitejs-vite-hwuaky?file=src%2FApp.vue&terminal=dev

[Devmond]

@KonnorRogers thanks for the response.

This must be an issue with my own setup then. I am using shoelace along with vuetify, which is another design system, it is possible "too many cooks in the kitchen" is causing the issues. Also my setup is vue2, I'll test with vue3 to see if that makes a difference.

Sorry for the false alarm, feel free to close this out.

[KonnorRogers]

@Devmond If you could create a reproduction (even a repo we can clone down) happy to help debug!

[Devmond]

Hi @KonnorRogers

This turns out to be an issue with vue 2. My case involved binding to a list of options and setting the value via v-bind directive. Binding doesn't work for vue 2 so the resulting value is empty, which means all dynamically set values are the same value thus change event doesn't trigger. No problem with vue 3.

(https://stackblitz.com/edit/vitejs-vite-hwuaky?file=src%2FApp.vue,src%2Fassets%2Flight.css,src%2Fassets%2Fshoelace.js,index.html&terminal=dev)