Vuetify Tutorial #24 - Form Basics

Key Takeaways

alright then gang so in this video I want to show you how we can start to flesh out our form in beautify now when it comes to making farms in beautify there's absolutely loads of different things that we can do really cool things as well and to cover all of that would probably take me about 30 lessons in a separate series so I'm not going to do all of that instead what I'm gonna do is get you up and running and show you how to create a couple of simple fields like a text field and a text area and in the next video as well also a date picker but if you want to learn more just check out the documentation it is really thorough and like I said there's a lot of cool things you can do with forms but let's start off basic now so let's go to the pop-up component and we already have the card title inside the card now we need the card text the actual content of the card so let's do V - card - text and inside here this is where our form is going to go now in beautifying when we're making a form we use the component first of all V - form alright now I'm going to give this a class just to give it some breathing room and that is going to be px - sorry just to give it some padding left and right in the x-direction so then first of all I want a text field so we don't use import or anything like that we use a separate component provided by beautify which is just V - text - field like so now what I'm going to do is give this a label and set that equal to title and we'll just preview this first of all in a browser so click add new project and now we can see that input field right there and if we click on it it does that nice little animation with our primary color so that's nice that's taken as one line of code right there to do and it comes baked with that functionality like so so that is our text field now what I'd like to do is store what a user types into this text field so to do that I can use a V - model and again this isn't a beauty fighting now this is just a standard view thing so V model makes allows us to sync the value of an input field with our data and we're going to set it equal to a property called - so let's place that in here title and then let's create the data down here data like so and return an object and inside this object will specify title and that's going to be an empty string to begin with so now when I use the types in here if you're typing test then we're going to be storing that on our object down here all right so that's the first one done the next one I'd like to do is the text area so we'll say this time V - and it's text area like so and this also can have a label so we'll say label is equal to and we'll just say information so information about the project so if we save that again now let's view this in a browser like so we can see this information and it's the text area so a bit deeper and we can also expand this as well and that's nice as we expand it it makes the actual pop-up bigger so that's really good okay so again I want to store what I user writes in here so we'll use a V model to do that and set that equal to info or rather I'll set it equal to content so let's store that down here as well and again this will be an empty string to begin with so now we have these two input fields now what would be nice is if we could have a little icon on the left of each one so on the left of title it could be some kind of folder like this over here and also in the information maybe a little pencil or something like that so let's do that now we don't have to use a V icon component to do this when we're using text fields of you to find knows that a lot of the time we want to prepend an icon to the text fields or the text areas or whatever input field it might be so they allow us to use a prop on these different components called prepend - icon and we set that equal to whatever the icon name is so much like we used things like folder in the nav bar or edit or whatever it is we can use that here so let me type in folder and then down here we'll do the same thing we'll prepend an icon and this one is going to be edit which is a pencil so again I got these front and material icons website not just making them up and if we save that now and view this you can see the title and the information and if we click on this again it goes purple which is really nice alright then so that's those two fields right here what I'm going to do now is just a submit field at the bottom and that is going to be a button so that at the bottom of the form will do V - BTN now this is going to be a flat button and the text is going to be ad project so ad project like so now what I'd like to do is give this a class first of all equal to success to make it that green color and also give this a class of MX 0 to strip away any margin in the X direction and MT which is the margin top 3 to give it some margin top as well save that and view it and we can see that button now at the bottom that's nice okay so we need a click event on this button so that when we click it we can take what I use it as typed in and do something with that information so down here let us create some methods I'm in these methods I want to create a method called submit and this submit method at the minute is just gonna log out the information that a user has typed in so we can say console dot log and will log out this title and also this dot content which in these two properties remember as a user types into here it's updating these properties so we're going to log those out when a user clicks on this button so we need to attach that event now so at click and set that equal to submit like so oops spell this correctly submit ok so now when we click that it's going to fire this function and log these to the console so let's just test this out so title test and hello and then it click this now if we inspect over here and open up the console then we see this error but don't worry about that we see this right here if i refresh over here then we shouldn't get that error I'm going to just add a new project and do this again test and hello submit and we get those logged to the console without the error all right so there we've gone the friends that is a very very simple form with icons to the left of these different input fields so in the next video what we'll do is a third field and that is going to be a date picker to specify the due date of this project