Now that you have experience with events, you can work on deleting a record. Because of the complexity of this app's structure, you'll need to use some additional tools.
- [Tutor] Now that we have some experience with events, let's work on deleting a record, because of the app's complexity and structure, we'll need to use some additional tools. So whenever you're working with deep structures, we can use a couple of different properties called parent and root to get back up a level or all the way to the beginning of the applications to do certain things, that's going to come in handy with our application, because if you remember, the list items are inside a list component and that component is inside the main component.
Now deleting an object from an existing array can get a little bit tricky, so I'm going to bring in one of my favorite libraries called Lodash, it does a fantastic job with array operations and it's also going to come in super handy, when we work with searching and sorting. You can get more information about Lodash at this URL. So in order to create an event for deleting elements, I'm going to have to go into this list item component here, remember that is actually a sub component of AppointmentList, so in order to delete here, we're going to have to create an event, just like we did with the addAppointment, we're going to create an event on this component, that makes a request to another event, where the data is held to actually modify our data.
So here's the delete button, I'm going to add a click event handler here, let's say @click and then that is going to execute a local method called requestRemoval and I like to call my methods, that don't directly do something, requests, because then I know that that is actually going to request another component to do something. So let's go ahead and go down here, let's add some comments.
So in addition to computed, and actually I'll do this after props, we're going to create a methods section here, that's always an object and we need a comma right here and then we're going to create our local method called requestRemoval and this is going to be a function literal and what we're going to do here is, let's go ahead and actually comment this too, and so what we want to do here is do what we normally do, which is an emit of an event, so if we say this and then we say emit, we can create an event in a parent component and I'm going to call this event, remove, then pass along the information about the appointment.
Now the problem is that my data isn't on the parent of this component, the parent of that component is AppointmentList.vue, that's not where the data is, the data is actually in App.vue, so if we use just this .emit, it's only going to go back one level and we need to go back two, so we can do that by using parent method and then ask for this event to be created in the parent of this component's parent.
Right, let's go ahead and save that and then we can go into the App.vue component and in AppointmentsList, we can receive that event, so that event was called remove and that will call a local event called removeItem, so we'll need to create that one, we already have this addAppointment method here, so let's go ahead and create another one, we'll need a comma right there and we'll call it removeItem, this is going to receive an appointment and what we can do is actually use Lodash and there's a special function called without, without will take an object away from an array and return the array without that object, that's a little bit hard to program, because you have to match every object, if you're just sending an array, this is going to work super well, we're going to say this.theAppointments, which remember, theAppointments is where we read our data file from, all that data goes into this theAppointments variable and then we will say it's going to be equal to underscore, which is the variable that Lodash uses and then .without and then in here, we'll pass this.theAppointments and then we'll pass the appointment, that we get from our original list item, let's make this bigger, so without takes an array and an element, that should be in that array and it returns essentially a new array without that element, we're going to take that and we're going to feed it into theAppointments, therefore modifying our data, now I'm using Lodash here, which means that I have to import it in my import command right here, so just like how I imported moment, I'm going to import underscore from Lodash and Lodash is something that is already loaded into our node modules, because of this package.json file, so it's right here, fantastic library, I suggest you go take a look at it, it's going to save you so much time, especially when you work with arrays.
So let's go ahead and save this, let's take a look at our application and we'll try to delete something, now you can see that it works really well. Now this isn't a real application, so as soon as we load the application again, all these things will automatically reload, but it's pretty realistic in the same way that I can read data using this getJSON, I can use other commands, if I was working with a real API to write the data out into that API, so we would do that, probably when we remove the item, we would actually use another call to actually execute a delete verb on an API and then pass along the records.
- Creating basic apps
- Using lifecycle hooks
- Adding nested subcomponents
- Modifying data with methods and events
- Working with layouts
- Searching, sorting, and ordering