v-model on a custom element (select v-model)

[Benoit-Vasseur]

Version

3.0.0-rc.5

Reproduction link

https://github.com/vuejs/vue-next/blob/master/packages/compiler-dom/src/transforms/vModel.ts#L93

Steps to reproduce

• try to us a web component with the "select api"

What is expected?

Be able to specify type=select for a web component ?

What is actually happening?

V_MODEL_SELECT is hard coded to the select tag so we cannot we this directive with a custom element.

---

To complete this one : https://github.com/vuejs/vue-next/issues/1699

It is a custom component so yes we can provide api compatible with other(s) directive(s) (combo text lazy for example) but I think that it is a valuable use case. What do you think ?

Otherwise it is working great with custom elements using others directives, thanks !

[posva]

Do you mean adding a extra check at https://github.com/vuejs/vue-next/blob/master/packages/compiler-dom/src/transforms/vModel.ts#L64 to allow type="select" on a custom component?

[yyx990803]

This one is tricky because <select> relies on specific behavior with its interaction with <option> elements inside of it. So it won't work unless you implement your custom <select> and <option> with the exact same behavior as the native ones (i.e. reflecting options into DOM properties like .options, .selectedInex, .value, and vice-versa).

[ais-one]

I used

@material/mwc-select @vaadin/vaadin-select

v-model does not do anything but :value and @change is good enough...

[pikax]

Looking at the both

@material/mwc-select
@vaadin/vaadin-select

Seems to be a pretty difficult to support them, since each implementation varies quite a bit.

The only way I would suppose to fix this is with aria-* we could infer the option based on aria-keys and whatnot, but I believe it would be pretty complicated to traverse the key for the v-model. IMO we need an API to allow expand the v-model or recommend to create a component on top of select web component.