In order to make more complex apps, you'll need to learn to manage events across modules.
- [Instructor] In the last video, I showed you how events can modify the state of your application. But it's often more convenient to manage the functionality through methods that can trigger more complex actions. Now, these actions can help trigger events in other components, so let's take a look at how that works. Now, in order to access values from input and other form fields, we need to add a v-model attribute to our form elements. This is going to create a two-way data binding that will store the value of the data and give you local access.
Now, once we have those models, then we can call a method when we submit the form to trigger some functionality within a component. In the methods, we can handle more complex functionality. A lot of times, the data or state is not going to live in the current component, so in order to modify our data we'll need to use the emit method and trigger an event in a separate component. This is the format right here, you just emit and then you specify the name of the event, and then, if you want to, you can pass along some data.
In the parent component where the data lives, we can catch that event, and then we can execute a local method to take care of the task. Now, this sounds a lot more complicated than it really is, so I think an example is going to help you understand. Alright, so, what I need to do is find my input fields in this add appointment, as well as this one over here, and go ahead and add a v-model so I can target the data within the form.
So, I'm going to do a find command here and type in just input. That's going to highlight all of the input fields, just making them easier to find. I'm using Visual Studio code. Over here I'll do a v-model. And if I want to, I can say here, petName. Once I do that, that is going to be the variable that's available, and it's two-way data bound to an existing variable, so I would have to go ahead and add petName here, initialize it to nothing.
Let's go ahead and save that, and now let's open this up and inspect our view section here. So if I hit add appointments, you'll see that we have petName, right now it doesn't have any value. And as soon as I start something in here, you can see that this fills up. And that's pretty cool, but there's actually an easier way to do this, so let's go ahead and make this smaller again. And what I'm going to do is I'm going to create a variable called formData here, and I'll initialize it to an array.
That'll be empty at first. And then what I can do is, when I create these v-models, I can use formData as the parent and then make petName an instance of that parent field. And that way, I don't have to create a bunch of variables for each of the pieces of data. So let's go ahead and copy this. We'll go ahead and use it here as well. This one's called petOwner.
I'm going to use it here. Appointment date. The time. And this last one isn't an input field, so my little trick is not going to work. Go ahead and put that one in here. And this should be a PT node. Once I have those v-models, then I can start worrying about how to submit this form.
Now, to do that, I'm going to need to submit this form, and traditionally, you do that here, in the form tag. We can call an event called submit. And then, with this submit event or whenever this submit event happens, then we can call a method, so we're going to call this requestAdd. And so, this is going to call this requestAdd function. Now, one thing that I need to do here is I need to add the prevent option here, because, by default, when I hit the submit button, the browsers are going to generate a page reload and I don't want that to happen, because my application is sort of like a single-page application and I don't want the page to reload.
This prevent will prevent the form from reloading. So now I need to generate that method, and we'll do that down here, and let's go ahead and add some comments here. It's always a good idea to have those. So, after our data, we'll need a comma here, and then we'll have a section called methods. Methods is going to be an object.
So in here, in requestAdd, I'm going to use the emit method, and in here, I'm going to emit a new event. So, emit is how you create an event from scratch. This event is going to be called addRecord, and I can also pass some data here. So I can say, pass formData. So let's go ahead and save that, and then, what I need to do is, on the parent event, on this App.vue, I need to generate that event and make sure that it is registered properly.
So, addAppointment up here, it's going to receive an event that we made up, and it's called addRecord, and that addRecord event is going to actually call another event, here on this component, that I'm going to call addAppointment. So, the purpose of this emit right here is to generate an event on the parent, the parent receives it through here, and then it can create or send it to a local method that's going to take care of actually adding the appointment.
So once I do that, then I'll need a methods section in here. So I'll do that after this created property. Again, just another object. And then, this is called addAppointment, and it's going to be a function that receives some data from the child function. So this addAppointment is actually going to send this some data. We're going to store it in a temporary variable called apt, and what we'll do is we'll say this, theAppointments.
Right, theAppointments is where I store the appointments from the json file, and then we'll just issue an array push here, with the appointment that we get from the form. So, I actually need to make sure that this is lowercase, that can really get you. You have to match cases and this addApointment has a lowercase at the beginning. So let's go ahead and save that. Then I'm going to come in here and type in a name.
I don't really need to fill out the other info. And then we'll hit add appointment. You can see that the new name is right here. So, we can actually make this a little bit easier if we hide the form after we submit it, and then we probably want to clear these fields right here. So, let's go ahead and add some things into our addAppointment. So, what I'm going to do is set this.formData back to an empty array after this is sent, and then I'm going to make the hidepanel variable be true, so that after this form is submitted, it's going to hide the panel.
Alright, let's save this. Let's go ahead and refresh this page so we get a clean set of records. Now, one thing that's going to be a problem is that the form data is actually a little bit different than the data I need to send, and that has to do with the date. The date is actually in two parts, so if I open add appointment, you'll notice that I'm asking for a date as well as a time, but the records in my database only have a record for the date, and it's actually just the date and time combined.
So normally, where I could just send the form data to the record, I need to actually do something slightly different to the form data. I'm going to create a variable called parseData here, and this is just going to be a temporarily variable, so it doesn't need to exist anywhere else. And what I'll do is I'll create the records here. So pet name is going to point to this.formData.petName, and then I'll do the rest of the records here.
petOwner, this.formData.petOwner, and so on and so forth. Now for the appointment date. What I'm going to do is grab the appointment date and just put a space in between and do the appointment time. And then the last one is the appointment notes.
I'll delete this extra one. And so now, what I need to send is actually this parsed data right here, instead of just the form data. Most of the time, you can just send the form data, but in this case, we're combining the date and the time together, so we needed to do this. Go ahead and save this. And we'll go ahead and refill the appointment here. We'll put in a date.
As well as a time. Let's try 9:06 AM. Alright, so we'll hit add appointment. And we can see the date is right here, so it is working correctly. But without this extra bit of code, it will not send the proper date to the database. So, one of the skills you have to develop is the ability to understand how different methods can be executed according to different events, and that you can generate your own events and even pass them along in-between different components.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering