#11 – Add “v-model” directive on custom input Component | Vue 2 Components, Beginners tutorial


Hello developers. Welcome back to the channel. Next, in the Vue.js series we gonna learn
about custom input component. Let’s say here we have input, type text and
v-model title the and here we have data return title. This is very basic. You all know about this v-model that provides
two-way data binding, here in the vue tab. You can see as you typing in here it automatically
updated right here behind the scenes it is doing two things. One, it is binding this input field with the
title and listening for the input event and changing its value. So we can also do something like this. Input type text and bind value with the title
on input change title is equal to dollar event dot target dot value. In the browser, It works exactly the same
as we type here It changes the title data automatically. This we model is equallant to this bind value
and then change its value on input in your own project You may want to wrap up form input
within a custom component. This way you can have a single place to attach
all customs, validations, ajax, and other behaviors however in this process You will
also find that in the custom component v-model directive no longer work the way it usually
does. So in this lesson, we’re going to learn how
we can implement v-model directive on any custom component. So let’s say we are creating a custom editor
component. here we want to implement this v-model here. So here we’ll say v-model is equal to content. Now how are we going to implement this? So first let’s create this editor component
editor dot vue. Here, we create the input type text here we
have script Let’s import this here, components editor. Here we register that competent. Next, what were you going to do here? Next, here we’re going to bind value with
value and here it will accept props value. Next on input update value dollar event dot
target dot value next we’re going to create this method methods. It will accept value. And here we emit this dot dollar emit input
value. this all here and we forget to register this
content here in the data property initially it is empty. let’s see this in the browser. Now, take a look at this. We have app and content is empty as we change,
you will see it is automatically changing here. And in the editor also we have value this. Now we have implemented this V-model directive
on this custom editor component. where We are accepting this value prop on
change its input value. We emit the input event with its new value. Now here in this component, we have only one
input field. Now let’s consider another situation where
you have a component with more than one inputs. So in that case, how are we going to implement,
v-models for that. For example, let’s say we have a date picker
component So here I will create date picker dot vue here we have a template, script now
inside this template, we have div tag and here we create input type text placeholder
day month and year Now in the app components. We’re gonna import date picker and let’s register
that here, let’s comment this. now here we say date-picker. Now let’s see this in browser refresh. Now we have three input fields in this date
picker component, and for that component, we want to implement v-model date. Let’s add this date in the data property initially
it is null Now how are we going to implement this for this component? Because here we have added v-model. So this component gonna accept prop value. So we’ll say props value. Now, In this case, we are going to consider
this value as an object. So here I’ll bind value value dot day and
here bind value. Value dot month and value value dot year. Next, on the input we will execute update
date. We will execute this update date method for
every input filed? Next, let’s create this method. Our next step is to emit the input event for
that here I’ll say this dot dollar emit input Now here we are gonna emit object where we
have a day, month and year next we’re gonna fetch the value of this input and stored in
this day property for that Let’s see here we have a attribute ref day picker and this
input field have property month picker, and it has year picker, next here I’ll say day
is equal to this dot dollar refs dot this day picker dot value. Same thing here would be month picker and
here. year picker. Now let’s see this in the browser, refresh,
it is not working. Let’s see this in the console. TypeError Cannot read property day of value
null. here the issue is that we are trying to bind a value dot day and value month and
year, but here we pass this date we where it is null so to fix this here we’ll say day
null month is equal to null and the year is equal to null. Now let’s see this in browser refresh now
it is fixed and working. Now let’s focus this date object. As we change the day. it’s automatically updated here, month and
year nowhere I’m going to print h1 date date.day / date.month and / date.year. now you can see this working. We have bind this V model to this date picker
component. where we have three input fields. Now, what if you do not want this date as
the object instead you want date like day, month and year. But here you need three input fields. So what are you going to do in that case? Because this time, this value does not object. So here this will not work and here we can
also not emit object. So how are we going to implement this? for
that, here we create computed property. So here what we will do, we will split this
date value, which is stored in this value prop into three parts day month year. And we store that respectively in this input
fields. So for that, let’s create a computed property
split date. So here, this split value is equal to this
dot value dot split by slash this slash is the separator this one Next, it is array. So here we’ll say return object Day is equal
to split value at zero index month is at one index and year is equal to split value index
two Now we will replace this value with split date dot day split date dot month and split
date dot year lets format this So now what we are doing here, we have created this split
date computed property and we split the value which has this date here day, month year by
this slash and we returned the object, day month year. And in this input field, we stored split date
dot day split date dot month and split date dot year. And then our final step is to emit a string. So instead of this object here, we’ll return
a string. So here, let’s say you the template literals
and dolor curly bracket this dot dollar refs dot day picker dot value next slash the separator
and dollar curly brackets this dot dollar refs dot month picker dot value separator
slash dolor curly bracket this dot dollar refs dot year picker dot value. This is all done next in the App component,
let’s remove all here and we just print date now refresh immediately you can see as we
change here it immediately reflects reflecting here Now we have learned how we can implement v-model
directive to the custom component. This is all in this tutorial. If you like the video hit the like button,
share this video and don’t forget to subscribe us. See you in the next video.

One Comment

Add a Comment

Your email address will not be published. Required fields are marked *