Working with v-model in Vue 3

In this post I will show you'll how to work with v-model in Vue 3 + Composition API using <script setup> on custom components, there's few ways to work with it, let's take a look!

First of all we always need to create an custom prop and emit for parent component:

1 - Creating modelValue prop and update emit (child component)

<script setup>
defineProps({
  modelValue: String
});

let emit = defineEmits(['update:modelValue']);
</script>

Note: 'update:modelValue' can't be changed on next steps, otherwise the emit event wont work.

2 - Firing the emit event (child component)

In this case I will use an textarea to do it, but you can use with an input too.

<template>
  <textarea
    @keyup="emit('update:modelValue', $event.target.value)"
    v-text="modelValue" 
  />
</template>

3 - Using your custom component (parent component)

Now you can call your custom component and pass a v-model.

<MyFancyTextArea v-model="comment" />

Usage with Typescript

For use v-model w/ Typescript is very simple, look the example below:

<script setup lang="ts">
defineProps<{
  modelValue: string,
}>()

const emit = defineEmits<{
    (event: 'update:modelValue', payload: string): void;
}>();
</script>

<template>
  <input
    @input="emit('update:modelValue', ($event.target as HTMLInputElement).value)"
  />
</template>

That's it!

If you want to read and learn more details about v-model usage, please make sure to visit the Vue 3 official documentation about it.

See'ya!

---

References for this post:
https://blog.q-bit.me/an-introduction-to-vue-3-typescript-component-properties-and-events/
https://vuejs.org/guide/components/events.html#usage-with-v-model

Comments

[Tim]

I think you might need to add :value="modelValue" in your typescript version.

[Irina Kats]

Seems like something is missing here.

1) If you're using v-model, this creates a two-way binding, i.e. the child component automatically updates the value in the parent component and vice versa. This does not strictly require an emit. You might want the emit event in child component if you want the parent to do anything special, other than updating the value.

2) It seems that in the last example with <input> your child does not update its value based on the parent, as Tim earlier noted.