Level 67
Finally figured this out... was missing emits.
$emit('update:search', $event.target.value)
<script>
export default {
emits: ['update:search'],
setup () {
return {}
}
}
</script>
<search v-model:search="search" />
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I can't seem to figure this extremely simple thing out.
In Vue 2, you can emit from a child component directly to the v-model. How do you do this in Vue 3?
$emit('input', $event.target.value)
<thing v-model="whatever" />
https://v3.vuejs.org/guide/migration/v-model.html#using-v-bind-sync
<ChildComponent v-model="pageTitle" />
<!-- would be shorthand for: -->
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>
This would lead me to believe the syntax for this would be:
$emit('update:modelValue', $event.target.value)
...but it doesn't work. What am I doing wrong here? Super new to Vue 3.
Finally figured this out... was missing emits.
$emit('update:search', $event.target.value)
<script>
export default {
emits: ['update:search'],
setup () {
return {}
}
}
</script>
<search v-model:search="search" />
Please or to participate in this conversation.