Sign up to access "Learn Livewire" right now.

Now, the reason I want to do this is because this changes around the way that we call LiveWire within our templates. If we take a look at what we're doing at the moment

over in our book item, when we delete this, we're using wire click. Now, that is specific LiveWire functionality within a blade template.

But as soon as we start to add a JavaScript confirmation in here, we're going to have to invoke this in a slightly different way. So let's go ahead and just comment this out.

And we'll copy it over just so we've got some of the styles in there. And let's take a look at how we can create an Alpine component out which handles this for us.

OK, so I'm going to get rid of the wire click because that's not going to work once we switch this over. And we're going to make this into an Alpine component. So if you've not worked with Alpine.js before,

we've already touched on this. It's part of LiveWire. It's already installed for us. And we can just create components

with this mini JavaScript framework. So what I'm going to do, I'm just going to pull these down onto separate lines so we can sort of focus on what is going on.

So we'll just keep it like that for now. I'm going to add a on handler, kind of similar to the LiveWire on handler. But in this case, we're working with pure Alpine.

So x on click, we want to do something. So if you're new to Alpine, let's just say click, just so you can see how this is all working. This initializes this particular button as a component.

And this adds an event handler. And anything within Alpine is prefixed with x. So if you see that anywhere, that's what you're dealing with.

So let's open up our console and hit Delete. And there we go. Sure enough, we get clicked. So now we can write any JavaScript code in here

that we want. You might have a modal functionality, a third party package that you're pulling in. In our case, I'm just going to use the native JavaScript

window confirm here to just say, are you sure? That returns to us a Boolean. So if we click Yes or whatever it says, that's going to go ahead and run this just in here.

So this is where we want to delete. Let's check this out. And I'm going to hit Delete here. We get, are you sure?

We can either hit Cancel, which doesn't invoke that, or it doesn't return true. So we don't see that if statement run. But if we press OK, sure enough, we get Delete.

Now, we've got to figure out how to actually call parent delete book, but from within JavaScript. How do we do this? Well, like we saw a little bit earlier

when we were in the console, we called LiveWire. Now, we don't necessarily need to do that within here. We can use wire. Again, another magic thing that we

can use within here to access LiveWire, but from JavaScript. And then we can just do the same thing. So we can just say parent. So we're doing exactly the same thing as we're doing here.

We're just chaining this on. And then we can say delete book. And because we're still working with an HTML, we can just pass this in here.

Because we're working within Blade, we can still output this. So let's just take a look at what this looks like within our code, and then we'll

run it and see what we get. So if we inspect this, you can see, sure enough, we get the window confirm and wire parent delete book 26. Perfect.

Again, this is still a modifiable value, which is why we introduced our authorization. But this should now work. So let's delete one of these down here,

because these all look very similar. So let's delete another book. I can cancel that off. Nothing happens.

But of course, when I hit OK, we access LiveWire, we access the parent, and that gets deleted. So really convenient that we can do this from JavaScript, because you might have a third-party package which

shows a confirmation modal. And then on any callback within that, you can just go ahead and access LiveWire using this magic wire property.