- Let's work on making these Delete buttons do something.
To do that, I'll have to show you how to work with events.
So, here's the button that I want to activate
and to create an event in Vue JS,
you can use this @ sign and then
type in the name of the event that you want to trigger.
So, you can do something like, whenever we click on an item
we want to do something, and in here you can pass along say,
the name of a method, like the one we've created here.
Although, this one will just format a date on the fly,
as it loops through the elements.
But we could create a method right here,
to take care of what we want to happen at this event.
But the data that we want to change doesn't exist
in the current component.
It actually exists in the parent component,
and this is pretty common in view applications.
You want to leave all your data in the main component
and then tell your sub-components to do something
on the main component.
So, what we're going to do here,
instead of calling a local method, is issue an emit event.
And, this will generate an event on the parent component.
The event that we want to call is going to be called
"remove" and then we'll pass along the item that
we want to remove.
In this case, the item is going to be the element that we
are looping through.
Right, so let's go ahead and save that.
And lets go now into App.view,
and we'll have to wire this up
in a couple of different ways.
We'll have to tell this appointment listcall that we're
looking for an event called "remove" to take place,
in this component.
And, when that event happens,
we will call a local method called "remove item".
That means that we're going to have to create this method.
And we'll do that in the methods section.
Now, this particular component doesn't have
a methods section, so we'll have to create that
and then, we'll have to generate this "remove item"
method here.
This is going to receive something, in this case,
an appointment.
And notice that we didn't have to specify that we are
passing along an item. When the event is generated,
it automatically passes along what is called a payload.
In this case, the payload contains the item that
we want to delete.
So, that's sort of understood.
We don't need to put parentheses in here and pass something
else along. So, now that we capture that appointment,
and what we can do here is reset the appointment erase
so that it doesn't have this element.
Now, I could spend some time writing a complex array removal
function but, I've already imported another library
that I really love, called Lodash that specializes in those
type of things.
So, I'm going to take advantage of that,
just import underscore from "lodash".
That's going to import the library, which has this amazing
method called "without". So then, we'll be able to say,
"this appointments is equal to underscore without this
appointments" and pass along the appointment that we
want to remove.
So, Lodash has a ton of object and array methods.
This one called "without", allows you to specify an element
and Lodash is going to look through an array,
which we're passing along here and return a new array that
doesn't have this element in it.
It's pretty beautiful.
So, I love using this thing.
And, let's go ahead and save this.
Take a look at our list.
And now, when we click on any of these items,
it will automatically delete them.
I want to show you one more thing.
Now, if you want to learn more about Lodash,
you can take a look at this URL.
There are a lot of different methods that you can use
and I think that you will find that this is a great library.
Now, I do want to mention also that whenever you're
working with Vue, it's a good idea to also use the
Vue JS developer tools. This is a Chrome extension
that gives you a lot of information about your project.
So, if we go back into our project,
you'll notice that I have this little icon here,
in my extensions section. And, whenever you go to
a website that is using Vue JS, this will detect that the
website is using that library and show you this little
green version of the icon here.
And, what that means is you can right-click in Chrome
and select inspect to take a look at an element
here in the tabs. You can't see it because the tabs aren't
large enough. So we'll click on this triangle and
select this view section right here.
And this is going to show you a lot of things about
your application. So, right now it's telling you that the
main application, or the root of the application is
right here. And remember, our app, that view file has a
name of MainApp, which is reflected right here.
And it's telling you that there are two objects in the
appointment array in that app.
And it looks like right now, I still have Appointment List.
So I'm going to go ahead delete that in just a minute.
Let's actually go ahead and delete that now.
So let's go ahead and modify that.
Looks like in the App.vue file, I still have this title.
So it's actually showing you the sort of list of data
elements in this current application.
And we'll go ahead and save that. And when we look back
in MainApp, you'll notice that is now gone.
Also, because this is just loading a local adjacent file,
it brought back all of the elements.
So, if we inspect again, you'll notice that in the Vue tab,
MainApp is going to have four elements.
Now you can do certain things like, edit the elements.
And if you open these up, you can see all of the data in the
elements.
So you can actually play around and edit them right here.
Or, if you test out your application, I'm going to click
on this delete item here, and you'll notice that I now
have three elements. And not only that,
but it also generated an event, or a series of events.
And it's showing you that the event that was emitted here,
is called remove, and here's where it came from,
Appointment List.
And it also has a payload of an element, which is what we
wanted to remove.
So, this is super useful for working with Vue JS.
I highly recommend that you download it because
it really allows you to play around with what's going on
with your application and understand what is happening
when you do things.
A fantastic way to debug what's going on within your apps.