Attribute inheritance does not support v-model

[Korijn]

Version

3.0.2

Reproduction link

https://jsfiddle.net/kr16gc2s/1/

Steps to reproduce

Try and adjust the slider; you won't see the text update.

What is expected?

The text should update upon adjusting the slider.

What is actually happening?

It doesn't update.

[posva]

See #1989

You still need to pass the correct attributes and event listeners based on your inner component that receives the v-model. In your case, add a prop modelValue, bind it with :value="modelValue" and add the emit @change="$emit('modelValue:update', $event.target.value)

Otherwise, this would mean applying a magic conversion for a prop named modelValue and onUpdate:modelValue but also any customized name

[Korijn]

Thanks for the workaround.

You've phrased it differently but essentially you are saying "indeed, wrapping inputs with attribute inheritance does not support v-model, unless you explicitly add support for it to the wrapping component (see example)", is that correct?

Would it be helpful if I open a PR to add this to the documentation? It's a pretty nasty gotcha.

[posva]

If you find a way to naturally introduce it (not a note/tip that breaks the flow), at https://v3.vuejs.org/guide/component-basics.html#using-v-model-on-components or somewhere else, I'm sure the docs team will appreciate! The idea is said there, though, v-model becomes an attribute an event listener, it's a convention.