Laravel Inertia 11 CourseBook Using the Modal or Dialog component with Vue
To display the modal we use a boolean property and to handle the record we want to delete we use another property that contains the id of the record we want to delete so we create the respective properties
data() {
return {
confirmDeleteActive: false,
deleteCategoryRow: "",
};
},From the actions section of the list now the operation to delete the only thing that will be done is to register the ID of the post that you want to delete
We create a function that deletes the post
import { Link, router } from "@inertiajs/vue3"
***
methods: {
deleteCategory() {
router.delete(route("category.destroy", this.deleteCategoryRow));
this.confirmDeleteActive = false;
},
},And finally returning to the action buttons the cancel button only hides the modal with the property that is responsible for indicating whether the modal is visible or not
<o-button @click="confirmDeleteActive = false">Cancel</o-button>And the conformation one calls the function defined above
<o-button variant="danger" @click="deleteCategory">Delete</o-button>And from the list
<!-- <Link as="button" type="button" method="DELETE" class="text-sm text-red-400 hover:text-red-700 ml-2" :href="route('category.destroy', c.id)">Delete</Link> -->
<o-button iconLeft="delete" rounded size="small" variant="danger" @click=" confirmDeleteActive = true; deleteCategoryRow = c.id;">Delete</o-button>
Así que, para usar este modal en vez del de Oruga, podemos definirlo como:resources/js/Pages/Dashboard/Post/Index.vue
<confirmation-modal :show="confirmDeleteActive">
<template v-slot:title> Confirmation </template>
<template v-slot:content>
<p class="p-4">Are you sure you want to delete the record?</p>
</template>
<template v-slot:footer>
<o-button variant="danger" @click="deletePost">Delete</o-button>
<div class="mr-3"></div>
<o-button @click="confirmDeleteActive = false">Cancel</o-button>
</template>
</confirmation-modal>Remember to import
import ConfirmationModal from "@/Components/ConfirmationModal.vue";
export default {
data() {
return {
confirmDeleteActive: false,
deletePostRow: "",
};
},
components: {
ConfirmationModal,
},
//***We create a function that deletes the post
import { Link, router } from "@inertiajs/vue3"
***
methods: {
deleteCategory() {
router.delete(route("category.destroy", this.deleteCategoryRow));
this.confirmDeleteActive = false;
},
},Video Transcript
The next implementation that we are going to do is to place a confirmation dialog here before performing the action for that here we can use the modal component of caterpillar ui remember you write here caterpillar ui we come here and look for the fashionable one that is here below and here we have the very simple operation by default This is what we have well the button To activate it another button to cancel it that I dont know where it is and here we have the modal through a bmel this is a property or whatever a Boolean type variable that indicates if it is active a true or not it is active a false and around here the content that would be practically everything and there we can then place some action buttons for example these to obviously be able to handle it in this case close it or hide it well in this case they are already using it here in some method but by varying the value of the vmodal it is more than enough And that is what we are going to implement since we have caterpillar ui installed in our application So the implementation is very simple I am showing it to you here there is a modal component through the config delete active that indicates whether or not our message is being displayed and the action buttons so Here we define the pair of variables one that indicates whether the modal will be active or not and another one that indicates which category we are going to delete We create a method
import { Link, router } from "@inertiajs/vue3"
***
methods: {
deleteCategory() {
router.delete(route("category.destroy", this.deleteCategoryRow));
this.confirmDeleteActive = false;
},
},Now since this is also an important point now we are going to have a single modal and only one way to access it that is to say here we have to take a step in between when we click here to delete this it will not delete it it will simply show the modal And from there it will also establish the category that we want to delete therefore it will be those two actions and when we hit a click here to delete the model finally we will delete it So this is the function that will be in charge of deleting it which will be called from the modal which is very important Otherwise here we can take advantage of the feature that we have in View in which we can execute certain javascript at once from the template So there is no need to define additional methods And in this case when we hit cancel from the modal we will hide it and when we hit delete from the modal the delete button Then we will call the method that I showed you previously that is in charge of finally deleting the category And well the button that we currently have or the link that we currently have here of delete what it will do would be to see where it is simply set the values there one to show the model and two to establish there the category that we want to delete that I dont see now here is what they do you can also do it through a separate method but this way it also works without problems
<o-button variant="danger" @click="deleteCategory">Delete</o-button>I may have made you a little dizzy but we are going to carry out the implementation I am going to carry out this implementation through the Index of the category as you saw so I am going to start here from the part of the Script that I think would be the simplest We write Data here we have the Data block and we write method and here we have the block of methods here So lets go there The first thing is the pair of variables confirm delete active equals false comma here I am going to put delete and I am going to put category Remember that at the end we are going to replicate this also for the posts So if you want to copy it more easily put delete Road or something like that delete record or whatever you want Since I have it like this in the book I am going to keep it like that since it is not bad either And this is going to put it equal to empty I could put it equal to zero But it does not matter here we are very free with the types of data The next is the delete category method here the same as I indicated before since we are going to replicate it you could put delete record or something like that or destroy or something like that that is up to you And here we do the operation we are also going to need to import here the router
import { Link, router } from "@inertiajs/vue3"We put router router point delete point Root we indicate the route with name category point destroyed here as parameter we pass dis pun delete category Road it could also be ID because we are not really passing Row but the ID but I left it like that so I am going to implement it in this way this being all the javascript here it seems to me then all that is missing is to create the blessed modal up here
<o-button iconLeft="delete" rounded size="small" variant="danger" @click=" confirmDeleteActive = true; deleteCategoryRow = c.id;">Delete</o-button>
Así que, para usar este modal en vez del de Oruga, podemos definirlo como:Then we set the buttons Im going to place it here or model then remember that we have the vmodel two points active
<o-modal v-model:active="confirmDeleteActive">And through the delete to see how we call it the confirm confirm delete active indicates if we are going to show it or not by default while we are laying out you can put it here in true right now we put it again in false so that it is more easily visualized with this something should appear over here Notice that this nice black screen appears thus obfuscated or with the better said with the opacity and now over here we are going to implement the model here you can place anything as I have told you I am going to put a padding of about four over here I am going to place the message then I translate it sure that you want to delete the selected record again there put whatever you want and this part would be for the actions now with this over here the screen message will appear but we do not have a way to confirm and that is why we are going to implement the following block over here we place Class I am going to align the buttons using Flex and I am going to place a Flex ro reverse here and now I will explain to you why this or why I make it mandatory And from here the components of or caterpillar button here I place delete
<o-button iconLeft="delete" rounded size="small" variant="danger" @click=" confirmDeleteActive = true; deleteCategoryRow = c.id;">Delete</o-button>
Así que, para usar este modal en vez del de Oruga, podemos definirlo como:It would be good right now we implement it and the Cancer one we are going to enter Why do I put this blessed Flex here our buttons will appear I put the reverse here not because it bothers me but because I want to align them here to the right I dont like them here I like them more here on the right and that is why here I put the reverse option what happens is that the reverse also inverts me This then you Here define which you want first the cancel or delete here I am going to invert them here Notice that delete and cancel appear first So since I want the delete one more to the right I put it here like this because it is precisely because of the reverse well and you can do tests simply remove this and thats it and here Remember that we also have the Call one but I am not going to align it as a column and little else so the problem is that we have everything very close together so we put a padding here of for example level 3 is I think it is fine and I do not like the background color I want it to make a little contrast so I am going to put a border here a background color of 100 for example and thats it we break it Of course and Flex row reverse
<div class="flex flex-row-reverse gap-2 bg-gray-100 p-3">
<o-button variant="danger" @click="deletePost">Delete</o-button>
<o-button @click="confirmDeleteActive = false">Cancel</o-button>
</div>
</o-modal>
I place it here and there we have the buttons still very close together here we could place a margin although the buttons do not take the margins the caterpillar component or we can place here better a Gap which is the margin of the grids and the Flex and we place here some amount and we have it separated Perfect then for this good for this Im going to place variant equal to Danger which indicates that it is a dangerous option by means of red color it is in this case because we are going to delete our category and here finally the clit events So what are we going to do in this first well I started with the difficult one better Im going to start from here we place the confirm delete active equal to true Since at this point is where it would be shown and here it would be equal to false no sorry to see no this is the one that deletes calls the delete category method as is and this would be practically everything here if we click here here Hit Cancel dont click this it should Music hide m that Ah is that I put it in true is false There it is like this So already at this point we can go down a little bit Here Im going to put it in false so that we dont forget we go up again and here were going to vary our route Here Im also going to put the link Well right now Ill do it better which is the padding so that it doesnt appear stuck or Button I put Button Here more or less the same Well this one is a little more complicated here we put the confirm delete active in true So what do we have at the moment Well I put delete here Im going to put the varian right to get out of this in Danger My God Danger The size in sm here appears all stuck the buttons or these components dont grab the classes that is if I put a class here I would have to put a di I suppose I marg left do 3 doesnt take it well a two what I got it doesnt take it there Notice that everything appears stuck for some reason it doesnt take the class thats how it works Well thats what I mean then Im going to put it here in the link that if it takes margin right if you wanted to place it then you would have to put Ah a di or something above the uton and then place your margin there There then for now we have to show it and hide it is what we have implemented and here to delete it but the one to delete is the Remember what this function that we have here calls the delete category which in the end is the one that calls the one we have here we need to define the delete category Row which is really the ID So we can also do this here Here you could also implement a separate function as you want but I am here taking advantage a little of the characteristics of javascript that allows me to implement certain logic here at the template level so if I save some functions apart from this also what we are going to do would be to select the category here we place delete category equal to the ID and this would be practically everything In the same way I recommend that you see the process more clearly since it is a little tangled Remember that these are intermediate steps is because we only have one model previously we had N links to delete that is if we had 10 links we had 10 categories or rather if we had 10 categories we had 10 links but in this case we only have one model therefore we have to configure it like this Here I am going to place a console log that says delete category row and here I return here by the way I also forgot to hide the modal you can place it before or after this we put confirm delete active equals false to hide it Since at that point it already did its job then at this point if we come here Im going to hit delete here we should see the ID that we want to delete on the screen which has to match this Of course If you see something else and you have to correct it So at this point Im going to remove all this Im going to create a category here in case I have any Post established with that not to delete it I hit create I go to the next page and hit delete and here it deletes perfectly just as you can see and we dont have any errors so in this way we were able to implement a confirmation dialog for inertia using Oruga
- Andrés Cruz
Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter