Vue JS 3 Tutorial for Beginners #7 - Forms & Inputs

so far in our view applications we've not really worked properly with forms and capturing form data that a user might type into them now view makes it really simple to work with forms so that we can keep track of what a user does type into these different fields or what they select from drop-downs etc and i'm going to show you how view handles all of these different inputs and fields so that when we submit the form at the bottom we can easily get access to all of that data in our case we're probably just going to log it to the console but later in the course we'll do things like save it to a database for now let's just create a new view project to do this so to do that open up a terminal navigate to where you want to create the project and type view create and we'll call this web hyphen form like so press enter and that's going to ask us a few different questions we want to manually select features enter and we're going to press space on the linter and then press enter again we'll choose version three and we want the config for bubble in a dedicated config file and we don't want to save that preset press enter and it's going to create that project for us [Music] once it's done we want a cd into the new project directory which is web hyphen form and then i can say code full stop press enter and that's going to open up in visual studio code all right then to begin with we'll just set out the basic structure of the application so go to source and we'll open up components delete hello world we don't want that and inside the here let's get rid of this import at the top and bring that up get rid of hello world and the image as well and we can get rid of hello world inside the components there and what i'd like to do is first of all just add a bit of style at the bottom for the body so i'm going to say body and then inside margin is zero to strip away that margin and give this a background of e e e like so and oops we need three e's which is a light gray and that's pretty much all i want to do i also want to create a component for the signup form so let's do that new file and call this sign up form dot view then inside here i'm going to type in view and enter for the first option to get that boilerplate and inside the template i want a simple form we don't need the action because we'll be using javascript to handle the submission inside all i'm going gonna do for now is one label and one input so we'll do a label and we don't need four right here i'll get rid of that and inside we'll say this is for the email field we also need an input and the type is going to be email and this is a required field okay so i also want to just do a few styles and i'm going to paste those in at the bottom so you don't have to watch me type them out and all we have is the form right here we give this a max width of 420 pixels margin top and bottom of 30 pixels auto left and right so it sits centrally on the page the background of the form is white texture line inside is left bit of padding and bit of border radius the label is going to be a gray color we display it as inline block so we can give it some padding and margin or rather just margin which is this the font size is reduced 0.6 ms uppercase for the text letter spacing 1 pixels and a font weight of bold then the input itself display block bit of padding a width of 100 box sizing border box meaning the sizing takes into consideration the padding and the border into its overall width and then the board is zero and the border bottom is one pixel solid and this light gray color the color of the text is five five five which is a darker gray color and by the way the reason i don't type all these out from scratch is that i'm assuming you already know a little bit about css and this is not a css course i'm sure you don't want me to explain absolutely everything i'm doing with css if you do want to learn about css and i've got loads of free tutorials on my youtube channel if you want to check those out but anyway let us now save this and i'm going to open up a terminal and i want to run this using npm run serve so we can preview it in a browser and that should hopefully give us the link we need to click in a second well before i do that by the way i want to nest this component this signup form in the app component over here so let's first import it i'm going to say import sign up form and it's from dot forward slash the same directory then into components and then we want the sign up form dot view and then we can register it right here sign up form you should know what i'm doing here we've done all of this before and i'm gonna now use the sign up form right here okay so now if we open this up in a browser i'm gonna bring this in from my other screen and this is what it looks like so far so very simple to begin with but that's our basic setup and next i'm gonna talk about how we can track what a user types into this input field using two-way data binding so the easiest way to track what a user types into an input field much like this one here or select from a drop-down box is to use what's known as v-model and v model is just another view directive and it allows us to sync a form field like this with some component data in a way that gives us something known as two-way data binding and we're going to talk about what that means later on but for now let's take a look at how this works so i'm going to head to the sign up form components and i want to create a bit of data so that i can store in it what are the user types in here so first of all we need our data function which returns an object and i'm going to create a property in this called email and to begin with that will be an empty string now what i'd like is that when a user types in this input field this gets updated with the value that they type in so if they type in a then this updates to keep track of that value with the value a like so so i want to kind of sync these two together and as they type it updates so abc and it becomes abc every time they type in a new key so the best way to do this and the easiest way to do this is by using that directive v model and all i have to do is come to the input and say v hyphen model and set it equal to whatever data property that i want to use to track this input so in our case it's this email so let's say email all right now you don't have to call this email you can call it what you want just makes sense to me since we're tracking an email to call it email now let's do another one i'm going to copy those two and change this to password and then i'm going to change the type to password and i'm going to change v model to password that means i have to create a password property over here and to begin with that will be a blank string so as i type into this field now then it's going to update this property so that we're tracking both of these different fields now and we're storing those values and then later on when we go to submit the form we have those values readily available in these data properties which is nice so let me now do something with these because at the minute although we're tracking them over here nothing's happening without doing anything with them so let's now maybe output them at the bottom so we can see that we are tracking them so underneath these two i'm going to do a paragraph tag and i will say in fact we'll do this outside of the form at the bottom so we'll do a paragraph tag first and say the email and that is going to be the email property that we have right here and then we'll do the same thing for the password so password is going to be password all right so let's give this a whirl i'm going to save it and come over here and you can see already without typing it they have already tracked what's currently in these different fields let me refresh you can see that to begin with they are empty strings and if i type in like mario you can see updating at the bottom and if i go to password test one two three you can see that updating at the bottom as well so we can see that we have these two properties tracking these two fields and that was really simple all we had to do was use the v model directive and say what property we want to store this value in dead dead simple so that's how this v model directive works but what does that term two-way data binding mean that i mentioned earlier well it means that values are bound two ways between the template inputs here and the component data itself so if the value updates from input by the user we bind that update to the component data so the component data updates that would be one-way data binding from the input to the component data but we also bind it the other way so if i updated the value from our component inside a method or something like that it would also update what we see inside the input field and anywhere else in the template that we output it like down here as well so we bind the data both ways that's called two-way data binding from the inputs to the data properties and then from here to the template as well and this is what v model does for us behind the scenes it binds the data in both directions so let me just demo this i'm going to start this off as mario and you'll see that we'll start off with mario in the input field and that's because it's bound from here to here as well as from here to here so we will be using v model an awful lot as we go through the rest of the course as we work with forms in numerous different projects all right so we've seen how we can use v model to track what a user types into these different input fields and then we store those in these data properties but we can use v model with other form fields as well not just inputs like this and one of those form fields is a select box so let's give this a whirl let's create a label for this first get rid of the four attribute and this is going to be for the role and that would be their job role and it could either be a web designer or a web developer so let's do a select box for this we don't need the name or the id attribute we're not going to be using those and inside the select box we need a couple of options now the value at the first option could be developer and what a user sees would be web developer let's do another and this time it's going to be for designer and this would be web designer let me just spell this correctly developer okay so now if we take a look at this a user has two options web designer and web developer and i might want to track what option a user selects so i'm going to create another property down here a third property called roll and that's going to be a blank string to begin with then i'm going to apply a v model to the select field itself so v hyphen model is equal to roll like that and now whatever a user selects the value of that option is going to be assigned to this right here now if i output this at the bottom we should see what i used to select so let's do roll and output that variable like so save it and come over here if we select one of these things now we can see update at the bottom with the value of whatever we select so web design is designer and web developer is developer now if we refresh we can see to begin with no value or option is selected if you want there to be a default option then you need to apply a value to this to begin with and the reason we don't see an option is because we have this binding and there is no value so we're saying okay i don't want anything being selected to begin with because this is empty now if i was to say in here designer it would mean this would be the default option to begin with so if i save it and come over here we can see web designer is selected and if we refresh it's still selected and we can see the value down here is designer i can still change it that's absolutely fine all we're doing is setting an initial value for the roll up here all right cool so that's how we use v model with select fields and again we can also use them with other fields as well like check boxes and we're going to see how to do that in the next lecture but before we do that i just want to make this look a little nicer so if we go down to the css the input fields have these styles i'm also going to apply those styles to select boxes as well save it and that looks a bit better all right then so we've already seen how to use v model with text inputs like this where a user types into the fields and we've seen how to use it with select boxes now i'd also like to show you how to use it with checkboxes too now there's two different ways we can use v model with checkboxes and i'm going to show you both and we'll start off with an example at the bottom of the form so let me first create a div with a class of terms for this form field and this is going to be for the terms and conditions like you see at the bottom of pretty much every form on the internet and we're going to create an input field for this of type checkbox and it's also going to be required now we also want a label and i'm doing this after the input purely for stylistic reasons so let me say inside the label accept terms and conditions all right so if we take a look at this it will look rubbish on the page so now i'm just going to add in a few different styles for this input field let me come down to the styles over here and just paste them in like so so you can see we're targeting the input where the type is checkbox and then we're displaying this as inline block so it sits next to the label then the width is 16 pixels bit of margin to the right but nowhere else and the position is relative so we can nudge it from the top by two pixels and that's just so it aligns itself a little bit more with the label so if we take a look at this now it should look a bit better and it does okay so we want to track when a user clicks this and unclicks it now the way we do that is by attaching a v model to this input over here so i'll say v model and we need to set it equal to some kind of data property so let's create that down here and i'm going to call it terms like that now that this is going to be a boolean and when a user checks this that boolean will be true when they uncheck it it will be false all right so that's how we can track whether a user has clicked this input field this checkbox so what i'm going to do is set it to be false to begin with then set v model equal to this which is terms save it and we won't see any significant effect so let's add another statement at the bottom over here to say whether they have accepted the terms let's say terms accepted and we're going to output the terms property save that and preview and we can see down here terms are accepted false but if we click this then it's true and then if we unclick it's false again now if you want something checked by default you can change the initial value here from false to true and now you can see when we first load it's checked okay now i'm going to change that back to false to begin with so that's the first way we can work with check boxes by using one single checkbox with a v model and then that will be either true or false dependent on whether it's checked or not checked now the second way to work with checkboxes is by using an array of values and multiple different checkboxes that belong together so let me just do an example of this down here i'm going to create a div and inside that div i'm going to create another input which is a check box like so and i'm not going to say required here because i don't require a user to check it if you have terms and conditions generally you have to check them in order to sign up or something so that's why that one's required but this one here is not required so you can leave it blank or you can check it now this one right here is going to have a v model equal to names now i need to make that property down here names and i'm going to set that to be an empty array to begin with we'll find out why in a second now i want a label for this so the label is going to just be a name and that will be sean all right so i'm going to duplicate this and paste it down here a couple more times so we have three check boxes each time around the v model is always going to be names for each one and that's because i want to group these together so they all belong to the same kind of data and this will become clear in a second now the label for this one is going to be yoshi and then for this one is going to be mario now then what happens here well they're all using v model names and that is an array so i want to give the user the opportunity to click as many of these as they want and uncheck as many of these as they want and what i'd like to do is make it so the ones they check those values yoshi and mario if we check those would end up inside this array now the way we do that is by assigning a value to each one of these check boxes so i could say value is equal to sean for this one much like the label the value for this one will be yoshi the value for the last one is mario so now because they're all connected to the same data they all use the same data property this time it can't be a boolean because when would it be true and when would it be false if we clicked this one but not the other two would that be true or false does it make sense so when we use multiple input fields that are of type checkbox that all have the same v model data property then instead we use an array and then whichever one of these are checked the value of those goes into the array so if we check this one and this one then the array will contain sean and yoshi the ones we checked makes sense so they're the two different ways we can work with checkboxes either with booleans for a single checkbox or with arrays of data using multiple checkboxes that belong together so let's just output those at the bottom i'm going to say down here paragraph tag and names and i'll output the names there so let me save this scroll down here we can see it's empty to begin with if we click short sean's added to it if we click mario that's added to it yoshi and if we uncheck one then it takes it out of the array okay so there we go there's the two different ways we can work with checkboxes now i'm actually going to delete this one right here because we don't need it for this form i just wanted to show you that we can do that and we might use it later in the course as well i'm gonna get rid of names down here as well and names down here so that we're just left with that one single checkbox at the bottom of our form to accept the terms and conditions all right then so what i'd like to do now is add in another input field below the rule whereby a user can enter in their skills for example html css javascript photoshop hopefully vue.js by now and then for each of those skills i'd like to take it and add it to an array which we can then store in our component data down here so we're keeping track of all the skills a user has so in order to do this we're going to have to learn about keyboard events which include things like key up key press key down and also keyboard event modifiers now these work in a very similar way to mouse event modifiers that we saw before it's just that this is for keyboards so now what i'm going to do is first of all create that input field above the terms but below the role we need a label and that label is going to say skills and then below that i'm going to create an input field and the type of input field is text now that i'm also going to apply a v model to this and i'm going to call this temp skill and the reason i'm going to call it temp skill is because every time a user adds in a new skill and then presses a certain key i'm going to take that temp skill and add it to a skills array and then we will clear the temp skill so a user can add in another one so it's always just a temporary skill okay so let's create that down here now temp skill like so and that's going to be just an empty string to begin with now i also like i said want to store all the skills inside an array so first of all how are we going to do this well if we come over here and take a look at this if i type in html that's been stored in the temp skill property now what i'd like to do is listen for a keyboard event and that is going to be a key up event so that when a user presses a certain key for example the comma but it could be any other key that you want i want to take what they've typed before the comma and i want to add it to the skills array and at that point i then want to clear this field so they can add another skill like css then if they type comma again i want to take the text again they've typed and add it to the skills array and then clear it so i need to listen for that key up event or key press events whichever you prefer for the comma and then when it is a comma that's the signal that i need to take what a user types and put it into the skills array so that's what we're gonna do so first of all we need to listen for this event now there's many different types of keyboard events so you could use over here if we say at because it is an event and then we could use key press or we could use key down or we could use key up which is what i'm going to use and then this fires every time a user presses a key and then lifts it up so i want to fire a function when this happens so add skill is going to be the name of that function now we need to create that down here inside the methods property so add skill now i also want to take in the event object into this function which remember we get automatically whenever an event fires in view so let's log that to the console to see what it looks like and if i come over here now whenever i press any key when that key comes up the event object is going to be logged over here so i could press k and we see that event object and we can see the key was k so i can also press comma and we can see the key is comma now that is the events that i want to listen for when the key is equal to a comma so let's check that first of all down here because remember i only want to add that skill that a user types into the input field when a user presses comma so i'm going to say if first of all and then i'll take the event e dot key is triple equal to a comma when that is true but also i want there to be a value inside temp skill so if they just type in for example nothing but a comma then i don't want this to fire because they've not typed anything before it so let's say and we have this dot temp skill meaning that has a value if this was an empty string still then this would be false and then whatever code we place inside the zip block would not fire so this is only going to fire if we press comma and we have a value before the comma for the temp skill all right so then what i'd like to do now is i'd like to take whatever the temp skill is and add it to the skills array so let me do that i'm going to say this dot skills and then dot push and then this dot temp skill like so so now then every time we press a comma it's going to add whatever is in the input field to the skills array right here now after that is done i want to take this temp skill like so and i want to set it equal to an empty string again because then it will clear the input field so we can add a new one so now let's try outputting this but instead of outputting it right here at the bottom i'm going to cycle through them underneath this input field and output them right here so to do that i'm going to say div and then i'm going to say v4 which we have seen already to cycle through something and that is going to be equal to skill in skills skills is what we're cycling through now inside this i'm going to output the skill before we do that though notice we have an error and if we hover over it says we need a key on this thing and that is so that view can keep track of the different elements in this list so whenever we use v4 we should always have a key property and that should be unique for each skill so do we have anything inside the skills array which is unique well the skill itself so we can just bind by using a colon the skill like so and that is going to be unique for every skill as we cycle through them they might add in the same skill twice but we'll sort that out later on for now i'm also going to give this a class of pill so we can style it a bit later on and inside the div i'm just going to output the skill so i'll say skill like so remember we have access to that individual skill as we cycle through them so let's save this and preview over here and if we type something in i'm going to clear this if we type in html and then press comma notice this goes down here we see the comma as well which we will sort out shortly but we see that now if i type in css and press comma that's added okay so there's two problems the first problem is that we see the comma over here and the second problem is that i can add in duplicate values so i could type in html and press comma and that would now appear twice and i don't want this to be the case because of two reasons first of all the key is not going to be the same for each div and when we use view it must be that the key is always unique if you don't do this then you might have unexpected behavior later on so that must always be unique the second reason that this is a problem is just that we don't want them to be twice that makes no sense we just want one skill to appear once in the list so the way we're going to solve this problem is by first of all coming down to this if check right here and inside that if check i want to make sure that the temp skill is not already inside the skills array so let me do an if check here to do that i'll say if and then i'm going to say this dot skills dots includes which is an array method and then this dot temp skill okay so let me just open this up and explain it this right here will check to see if the skills array already includes the temp skill which we're trying to add to it now if it does include that this is going to be true now i only want to fire this code if it doesn't include that so i need to negate this and now if it doesn't include this it's going to be true because of this and therefore we can add the temp skill so let me take this and place it inside here so now we can't add duplicate skills so if i save this and test it let me come over here html press comma and it adds it css that's fine if i try to add in html again and press comma we don't get it anymore it still clears it because we still clear it right here outside of this if block but it only adds it in if it's not already included in the skills array so that's the first problem solved the second problem is that this thing right here is being added to the skills array as well and we don't want that so the way we can get around this is to add an event modifier to this thing over here so if i say dot alt it means that the alt key must also be pressed and if we hold down the alt key as well as pressing another key the value of that other key won't actually appear inside the input let me demo that if i type in s it appears there if i type alt s we don't see that but the keyboard event still happens so if i refresh so we can clear this i'm going to type in html and then i'm going to say alt comma and notice it still fires the event but we don't actually get the comma now so that's why i used this alt event modifier right here so i know there was quite a lot to take in in that video but hopefully now you understand the two main concepts that we've gone through here first of all we have a keyboard event key up that fires a function every time there is a key up event inside this input field and then we find this add skill function inside that we take in the event object and we check the key and if it was a comma and if this.temp skill has a value if the users type something into the input field at that point we check the current skills if the current skills does not already include the temp skill what they've typed in right here at that point if it doesn't include it we add that skill to the skills array and then we clear out the temp skill so we use it can add in another one now we add on the alt event modifier right here so that the comma doesn't actually get displayed inside the skills array it still fires the event and it still recognizes that it was the comma key that was pressed but it doesn't display that because when we hold alt and the key it doesn't show that key in the input okay so there we go that is keyboard events and that is keyboard event modifiers and again we probably will use these more as we go forward all right then so time for another challenge and this time around i want you to be able to attach a click event to each skill that we output so that when a user clicks on one of those skills we delete it from the skills array down here so when we click on photoshop for example delete that from the skills array and it will no longer show over here so before we do that i'm just going to add some styles to these things right here because currently they look pants and i want them to look a bit better so to do that i'm using the pill class where we output each skill so down here in the styles i'm just going to paste these in and walk you through them we display them as inline blocks so they sit next to each other give them a bit of margin and padding a background of a very light gray a border radius to make them rounded at the corners font size of 12 that reduces it letter spacing of one pixel we make them bold the color of the text is a deepish kind of gray and then the cursor is pointer so we know that we can click them so if i save this and preview we can see the look like this now so hit pause now and give this a try and then if you start to struggle or you just want to see my solution hit play again and i'm going to show you how to do it so the first step in all of this is attaching a click event to each one of these skills so over in the code i'm going to come to this loop and then where we have this skill i'm going to cut that create a span tag to surround it and then attach a click event to the span tag now you don't need to use a span tag you can choose whatever you want to attach the click event to it really doesn't matter i'm going to set this equal to a function called delete skill now let's create that function down here in the methods so after add skill we want delete skill as well now inside here we want to delete a specific skill but we need to know what skill we want to delete so let's pass it into this function as an argument now remember we have access to each individual skill because we're in a v4 loop and we can use that right here we can pass it in as an argument so that is the skill that we want to delete so down here we can take in that skill and then we need to figure out a way to remove it from the skills array and to do this we're going to use the filter method on the array so i'm going to say this.skills is equal to a new value because we're updating it and we're going to set that equal to this dot skills dot filter now remember the filter method cycles through an array and fires a function for each item in the array if we return true for an item in the array then we keep it in the array if we return false we remove it from the array so let's find this function for each item and inside this function we take the item that we're currently iterating so all i want to do is check does the skill that we take in right here equal to the item because if it does then we want to return false because we want to remove that skill so let's return skill is not equal to item so if they're not equal it returns true and that item remains in the array if they are equal if the skill we clicked on and pass into the function matches the item that we're currently iterating then we want to remove it so if they are equal this will be false and therefore since we're returning false for that item it filters it out of the array it removes it this returns the filtered array which is then assigned to the skills property so we're updating the skills property with that filtered array so let's give this a whirl check this out add a couple of skills html and css photoshop that will do click on one of these and it deletes it awesome all right then so the last thing i want to show you in this chapter is how to submit this form and then also how to react to that submit event when it occurs now in practice if you create a real project then what you do at this point is to take all of that data on submission and send it to a database maybe to save but since we've not worked with databases yet we're not going to do that and instead what we'll do is maybe just a bit of custom validation for the password field to make sure it's long enough and then we could output an error if it's not long enough and then also with the rest of the data just log it to the console so i just want to show you the basics of how to set up this submit event and handle it so to begin with we need to create a button at the bottom of the form let's do that and i'm going to surround this button in a div with a class of submit and the only reason i'm doing this is so i can apply some css styles to it in a minute inside that we need a button and i'm going to say create and account inside it now if we take a look at this it probably looks pants yes it does so let's apply some styles to it i'm just going to paste these at the bottom of the style tag and i got these from my repo which you can get as well the background of the button is going to be blue no border a bit of padding and margin to the top the color of the text is white and the border radius is 20 pixels to soften up the corners the submit dude that surrounds the button says text align is center and that's so the button inside it will be aligned in the center of the form so let's save that in preview and that looks a lot better now whenever we have a button inside a form if we were to click on that button it would fire a submit event on the form that is the normal behavior of html forms nothing to do with view whatsoever so if i was to enter in a load of junk in here just so we can test this out and accept the terms and conditions if i click create an account that would fire a submit event so check this out the normal behavior in html is to refresh the page when that happens and since it refreshes these go back to blank fields so instead of this what i'd like to do is react to this submit event in view and override that default behavior so that i can do something different so the way i'm going to do this is by attaching a submit event to the form now you might be thinking why not just attach a click event to the button and you could do that but the actual event that occurs is the form being submitted so i'm going to use that submit event instead so we can take our form right here and we can attach a submit event to it much like we attach events to other things using the at symbol so i'll say at submit and set it equal to a function i'm going to call this function handle submit but you can call it what you want it really doesn't matter and we need to create that function down at the bottom over here inside methods handle submit now if we wanted to we could take in the event object but i don't need it so i won't do now i'm going to console.log over here form submitted so we can see when this happens now there is still a problem with this and the problem is that we're still not overriding the default behavior of the browser yes we're saying we want to fire a function when the form is submitted but we're not telling form that look i want you to prevent the default action of refreshing the page when you're submitted and i'll demo that if we open up the console over here and clear that i'm going to type in a load of stuff just to test this password and then accept the terms notice the log will flash up very quickly over here but then the page will refresh create an account and we saw that message very quickly before the page refreshed so it's firing this function which is good but we still need to say look prevent the default action of the form being submitted do not reload the page and the way we do that in view is by attaching an event modifier to the submit event that event modifier is prevent and that prevents the default action of the form being submitted so now if i try this i'm going to come over here again and enter in a load of different details like so and then down here create an account and we see form submitted and the page does not reload so that's what we need to do now like i said normally inside this function down here what we do is we check all the data that we have on the user that they've entered and then submit it to a database we're not going to do that because we've not worked with databases yet instead what i'm going to do now is a little bit of validation to check the password field and also just log all the details out to the console so then let's get rid of this and first of all let's do a little bit of validation on the password so validate password so i want to check to make sure that the password length is over five characters if it's not then i'm going to create an error and output that error in the template so first of all i'm going to create a password error property which i've already done right here inside our data and that's an empty string to begin with and if the password length is not over 5 i'm going to update this now i could use an if check to say look if this dot password which is where we're storing the password is not over 5 then update this with an error but instead i'm going to use the ternary operator just to be a bit different and i'm going to say this dot password error is equal to this password dot length is over five question mark and then the way a ternary operator works is that we have a statement that we evaluate and then we do a question mark and then we have two values the left value is going to be if this is true the right value is going to be if this is false and then whatever value we choose is assigned to the password error so for example if this is true and the password length is over 5 then the error is going to be just an empty string because we don't need an error then we do a colon and we say what will the value be if this is false so let's say in this case the password must be at least six cars long that's all we need to do now i'm just gonna format this a bit better by adding this to the next line so it doesn't scoot off over to the right okay so now we're updating this password error based on the password length if it's over five then the error is still a blank string if it's not over five then the password error will become this string right here okay so now what we can do is we can output this error up in the template and we'll do that below the password field over here now we only want to output this error if password error has a value so we'll say div and then v if is equal to password error now that's going to be false if it's an empty string so we won't output it then and it's going to be true if it's not an empty string in which case we will output it so let's output there password error like so and i'm also going to give this a class equal to error just so we can style it a little bit in a second now let's try this out if i enter in some kind of email and then i enter in a password that's only three characters long and then accept watch the error see password must be at least six characters long if i change this to be more than five characters long and create an account the error goes because at that point down here we set the error back to an empty string okay so let's just add in a little style for the error at the bottom down here i'm going to copy this from my course files again and paste it in right at the bottom and we can see the color is this red color we give it a bit of margin at the top we'll reduce the font size and make it bold so let's just see that in action if i reduce this to a few characters create an account and this is the error now awesome okay so we've done a little bit of validation which is what we might do inside a submit handler like this we probably do something a little more complex than this and check the other fields as well but this is just an example of what we can do inside this handler so now what i'd like to do is gather up all of the information and output it to the console but i only want to do this if there's not an error so let's say if and then we need exclamation mark this dot password error so this is only gonna fire code if there is no error because we have this in front of it and inside here i'm just gonna log out all of the different values that we have so i'm going to paste these logs in so you don't have to watch me type it out so we're outputting the email the password the role the skills and the terms so let's check this out and make sure everything works add in an email i'm going to say mario at yahoo.cod uk password a lot of old characters don't know what i'm typing and then we'll say web developer skills html and css and view and then let's accept the terms and create an account and we see all of this information over here awesome now like i said in the future we will take all of this information and probably do something like send it to a database or use an authentication service to sign that user up but for now this will do i just wanted to show you how to use forms in vue.js

Channel: The Net Ninja

Views: 54,005

Keywords: Vue, vue 3, vue tutorial, vue 3 tutorial, vue js, vue.js, vue js tutorial, vue.js tutorial, vue js tutorial for beginners, beginners, tutorial, vue.js 3, vue 3 new features, vue js 3 tutorial, vue.js 3 tutorial, vue 2 vs vue 3, forms, input, v-model, vue v-model, vue forms, vue.js forms, vue inputs, 2 way data binding, data binding, form binding

Id: ixOcve5PX-Q

Length: 45min 41sec (2741 seconds)

Published: Wed Dec 09 2020