Vue.js is a powerful JavaScript library that makes creating complex web apps more straightforward than ever. Out of the box, Vue.js gives you most of the tools you need to get going. However, something that seems simple can cause some tricky behavior. One common example I’ve seen is having a component with an input interact with the parent via v-model. Generally, when you create an input component, you need the data it interacts with to update on the parent component.
There are many ways to approach updating the parent’s data, but the cleanest way in my opinion is to use the component in the same way you would with a normal input with v-model. Let dive into this method.
How v-model Works
Normally, you’d define a v-model value to bind a piece of data to an input like so:
<input type="text" v-model="someValue" />
It works wonderfully and there’s not much more to it. Vue actually is doing a couple of things for you behind the scenes here. Once you make a child component with an input that needs a binding to a piece of data on the parent, you’ll see that this no longer works.
<template>
<section id="parent">
<ChildComponent v-model="username" />
</section>
</template>
<script>
import ChildComponent from '@/Components/ChildComponent'
export default {
components: {
ChildComponent
},
data() {
return {
username: 'user'
}
}
}
</script>
// ChildComponent <template> <input placeholder="Update Username" /> </template>
The expectation is that the input will update normally with v-model defined on the component in the parent. This is not the case. Here’s what v-model needs to actually work:
A value on the bound input element – Behind the scenes, Vue adds a :value
When the input is updated, a custom event is emitted to update the bound data prop – In the opposite direction, Vue uses this custom event to update the data prop when the input is changed.
That’s where two-way data binding comes from: the input communicates with the data prop and the input is updated with the data prop via :value
Applying This To The Child Component
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>
<script>
props: ['modelValue'],
emits: ['update:modelValue'],
</script>
This should update the bound property on the parent component when used:
<ChildComponent v-model="username" />
You likely notice two new properties here: modelValue and update:modelValue
modelValue is used by Vue to keep the input updated with the bound data prop. You’ll notice it’s passed in as a prop and used as the :valuemodelValue is what’s passed in when you use v-model on the parent component. In this case, it’s the value of username.
Update :modelValue is also used by Vue internally for updating the bound data prop when the input is changed. You’ll notice that an event is emitted on @inputupdate and passing the :modelValue$event.target.value
Don’t forget the emits: ['update:modelValue']
That’s pretty much it! Now whenever you make a component you’ll know how to replicate the v-model logic that Vue uses behind the scenes. More importantly, you unlock greater power when making components.
Comments