Vue allows for v-model
binding on custom components. This is because v-model
is just syntactic sugar for v-bind:value
and v-on:input
.
This is mostly true — there seems to be some magic around radio
, select
, and checkbox
inputs.
This is important to note for when you want to wrap one of these input types in a custom component.
You can't pass your value
prop to v-model
because then you are mutating props.
Instead, you can use a computed property with both a get
and a set
method to proxy the v-model
to the input.
This example shows all three input types along with a mixin to make this easier (which may or may not be that useful in practice).
You can see the code in action at CodeSandbox.