Everything You Need to Know About Vue v-model // Two-way data binding in Vue

[Music] hey view devs welcome back to learn view in today's video we're going to be talking all about v model an important directive that provides two-way data binding between an input and form data or between two components it's a simple concept that i'm sure all of you have used before but the true powers of v model take some time to understand so first what is view v model well like we were just talking about view model is a directive that we can use in template code and a directive is a template token that tells view how we want to handle our dom in the case of v model it tells a view that we want to create a two-way data binding between a value in our template and a value in our data properties a pretty common use case for v-model is when designing forms and inputs we can use it to have our dom input elements modify data inside of our view instance let's take a look at a simple example that uses v model on a text input let's start off in our script so inside of our data we'll return a reactive property called value and give it a default value of hello world then inside of our template we'll create an input of type text and say v model equals value and then just we can see what's going on let's print out value so when we type around our text input we'll see our data property is changing so what's the difference between v model and v bind and sometimes these two directives get switched up pretty commonly the difference is that v model provides two-way data binding in our example that means when our data changes our input will change too and if our input changes our data changes however v bind only binds data one way and this is useful when creating a single direction data flow in your apps but you really have to be careful when choosing between v model and v bind so next let's talk about modifiers for v model view gives us a few different modifiers that allow us to change the functionality of our v model they can be added like this by adding a dot after our v model and they can even be chained together to apply multiple modifiers so the first one we'll look at is dot lazy by default v model syncs with the state of our view instance on every single input event this includes things like gaining focus losing focus and being blurred the dot lazy modifier changes rv model so that it only syncs after change events this reduces the number of times our v model is trying to sync with our view instance and in some cases can increase performance next let's look at dot number often our inputs will automatically type the input as a string even if we give the data a type of number one way to ensure that a value is being handled as a number is to use this dot number modifier according to the view docs if the input changes and the new value cannot be parsed by parse float then the last valid value of input is returned instead so if we were typing let's say 6 our value would be six then if we typed f our value would still be six and finally let's look at dot trim and similar to trim methods in most programming languages the trim modifier removes leading or trailing white space before returning the value all right now that we know the basics of v-model by looking at inputs let's check out an interesting use for v-model creating a two-way data bind between components in view data binding has two main steps one passing our data from our parent and two emitting an event from our child to update the parrot using v model on a custom component allows us to pass a prop and listen to an emit event with just one directive so if we take a look at this code just by saying v model value it's the same as passing a prop called model value that's equal to value and then listening for an update model value event where we set value to whatever is being passed in our event okay let's take a little deeper look at this let's continue with our example of using v model for forms and we'll create a custom text input called customtextinput.view the default name for a value passed using v model is model value which is what we'll be using for this example however if we did want to give it a custom name we can just add a colon after our v model and then type whatever we want the name to be and then the name of the update event will be update colon whatever the name we're passing is here's a little handy graphic from the view docs that kind of summarizes what's going on title is the name of the problem that's going to be available in the child component and then page title is the data in our parent component that we're binding so now that we have a parent component set up to both pass the prompt and listen to the update event let's access it from a child component there are two things we have to do inside custom text input.view accept our v model value as a prop and then second emit an update event when our input changes okay let's first declare it as a prop inside of our script next we'll just create a basic label and then an input with a type of text and a placeholder then we'll bind the input's value to our model value prop and whenever there's an input event we'll omit the new value using update model value and if you look at this emit you can see that the data we're binding to our event is event.target.value which is the actual string value of this input so basically whenever we emit an event we're going to be changing value in the parent to event.target.value which is a new string now if we go back and look at our browser we can see it in action whenever we type in our child component input text the print statement in our parent component is also being updated fantastic all right so we've covered a few basics of using v model to bind data between two components let's take a look at some more advanced ways to use the v model directive so we can use v model multiple times for a single component to use v-model multiple times we just have to be sure to name each prob uniquely and access it correctly inside of our child component so let's add a second v model to our input called last name in the parent component we can say v model colon and then give it a unique name and we'll just say last name equals last name and then let's go down to our data and make our last name property then inside of a child component we can just add last name to our props and then simply create another label an input that says last name that binds the value to last name and on an input event emits an event with a proper name update colon last name if we go look at our project now we can see both v models working independently another really cool thing we can do is add custom modifiers for our v model we've seen the built-in modifiers like lazy and number but there will come a time when we want to add our own let's say we want to create a modifier that removes all spaces from our input we'll call it no white space so let's add it to our value v model and like the built-in modifiers we can just add dot no dash white space then inside of our input component we can capture the modifier using props and the name for the custom modifiers is well name and then modifiers so in this case since the default name is model will be model modifiers all right so the first thing we want to do is change our input handler to use a custom method so that we can make any modifications to our data before emitting to our parent component we'll call our custom method admit value and it will accept the name of the property being edited as well as the event object so we can say emit value model value and then event in our emit value method before we actually admit to our parent we want to check our modifiers and if our no whitespace modifier is true we can modify our value before emitting it to the parent first we'll get the value of the input by saying let val equal event.target.value then we'll check the model modifiers by saying this dot model modifiers and then no white space and if that's true then we can just use a simple string replace and replace all of the white space with an empty string and then finally after that check we can emit our method by saying update prop name and using prop name here means that we can use this emit value for all of our different props and then finally the value which may or may not have the white space removed okay awesome let's take a look at what we have so whenever our input changes and our text has a space it will be removed inside of the parent value and since we're using v model this will change it back inside the child too alright awesome hopefully this quick little video taught you something about v-model in its base use case like forms and input data v-model is a really simple concept however when we begin to create custom components and work with a lot more complex data structures we can really unleash the true power v model if you have any questions let me know in the comments down below and as always please like and subscribe for more free view content happy coding and i'll see you in the next video you

Channel: LearnVue

Views: 3,415

Keywords: vuejs, web development, technology

Id: ZzmGhQequsM

Length: 8min 4sec (484 seconds)

Published: Tue Jun 01 2021