Alright, let's do another one. If I load this Vue to edit a Comment, at the bottom, I'd like to add the option of deleting the Comment entirely. So maybe right down here, or right there. So yeah, it sounds like that would be a form that submits a delete request to the comments endpoint. And that might look like, if we take a few stabs here, submit a POST request, well actually, a DELETE request, and that'll go to comments/{id}, and then we'll grab this button here, and then we'll say delete. And that's what we get.

And then we'll grab this button here, and then we'll say delete. And that's what we get. So now, if I run this in the browser, it doesn't look great, but you do have your delete button. And again, that's going to make a DELETE request to this endpoint. If we go to our routes file, we don't have that, but real quick, it would look something like this, authorize the delete, we're going to skip that, but then we would just say comment delete, maybe set a flash message, and then redirect wherever you need to go. Alright, so if we take a look at this, it's kind of heavy. It's a little bulky, isn't it? You kind of wish, well, I want an anchor tag, and when you click the anchor tag, submit

It's a little bulky, isn't it? You kind of wish, well, I want an anchor tag, and when you click the anchor tag, submit a DELETE request where I tell you to go, and it just doesn't work that way. So in the past, frameworks have gotten around this by adding little helpers to make it feel like you're adding a link, but it actually expands to a full form. Or it instead uses JavaScript to submit the request. Anyways, let's see if we can clean this up. Now first, in the previous episode, we set up a FormComponent, and that would help a little bit, but still not enough. So I could say, make a DELETE request, and get rid of all of that.

Alright, let's make it work. So I will comment that out, switch back to Firefox and reload. Of course it's going to fail, because that component doesn't exist. So we'll do that now, form button. And now I'll paste what I had in. And now this is neat, because we have one component referencing another component. So let's just spit out the action here, and the method, and then finally, our slot. Alright, let's have a look. Back to Firefox, and it's now working, and you can see the form here. We're making a DELETE request to that endpoint.

Back to Firefox, and it's now working, and you can see the form here. We're making a delete request to that endpoint. Okay, but next, we may not want to hard code the styling. Maybe you want it to be basic text, but then again, allow for custom styling. Let's see. If I copied this, but removed it, and give it a refresh, now it does look like a standard link. But if I wanted it to look like a button, maybe, you know, let's see. Let's add a class here, and it would be nice if I could make that work, but of course right now we know that's not going to work.

That works as well. Okay, one last thing. It might be the case that, well, certain attributes you want on the button, but anything else, you could add up here. And if that's the case, remember, this $attributes variable is an instance of, what is it, ComponentAttributeBag. So there are methods like get, or only, or except, to fetch exactly what you want from that attribute bag. So yeah, you could do something instead, like this. class="attributes", and then get the value for that class attribute.

So yeah, you could do something instead, like this. class="attributes", and then get the value for that class attribute. And then you could do something else up here, using the attributes. But yeah, in our case, we're just going to pass everything through. All right, so let's come on back. I am fine with this being treated as a simple text link, which means I can get rid of this. And if we come back, refresh, we click it, it deletes the comment and redirects to the home page, where I just have Hello World here. It works.

It works.