Vue: Better v-model support

[tamara-nexus]

Hello!

Our Vue developers are trying out the different components and we have noticed that some components support v-model, while others do not.

E.g. Text input: v-model seems to work out of the box
Radio button, checkbox, switch components: one has to do a workaround because v-model is not working out of the box

Example with code:

E.g. in radio button, we would like:

v-model="radioButtonValue"

Current workaround:

:value="radioButtonValue" @sl-change="radioButtonValue= $event.target.value"

Thank you!

[claviska]

We have a utility directive to help bind form controls with Vue more easily.

https://shoelace.style/frameworks/vue/#two-way-binding

The ones that work do so coincidentally because of event retargeting. I would recommend always using the directive for Shoelace form controls instead of relying on v-model.

This is a Vue + custom elements thing, unfortunately. But I believe we could solve it by preventing the internal input event from bubbling out and emitting it from the host element. I vaguely recall @break-stuff saying this was possible.

[break-stuff]

You are correct! Emitting the non-scoped input and change events should allow Vue and Angular two-way data binding to operate correctly.

[tamara-nexus]

Thank you for the clarification. I apologize for the late response I was out of office over the past month. So we should just use the components as indicated in your documentation and there should not be any problem with events etc.. right?