[Vuejs]-Vue – using v-model on a <component> with :is

by

1👍

✅

The v-model syntaxic sugar is treated differently whether you use it on a Vue component or a native html tag.

When used on a component, <MyInput v-model="msg" /> is equivalent of using
<MyInput :value="msg" @update:value="val => msg = val" />.

When used on an <input> tag, it’s translated like this:
<input :value="msg" @input="evt => msg = evt.target.value" />.

When using dynamic component <component :is="" />, Vue mostly assume it’s gonna be Vue components, so it will bind the event @update:value, which isn’t triggerred by the <input> element, and thus won’t update your binded variable.

Here, you should break down the v-model into the prop + event, like on the native input tag:

<component :is="tag" :value="bar" @input="evt => bar = evt.target.value" />
👤Kapcash

Leave a comment