DEV Community

cn-2k
cn-2k

Posted on

6

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

3 - Using your custom component (parent component)

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

<MyFancyTextArea v-model="comment" />
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (2)

Collapse
 
wrongrook profile image
Tim

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

Collapse
 
irina_kats profile image
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.

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay