Laravel 9 Crud with Vue JS 3 – Part 3- Delete operation & Event emitting and Listening in Vue JS

In the previous articles, we discussed about creating, reading and updating data in a Laravel 9 application using Vue JS 3. In this article, we will focus on the delete operation and event emitting and listening in Vue JS.

Delete Operation

To perform a delete operation in a Laravel 9 application using Vue JS, we need to create a method in our Vue component that will handle the delete request and make an API call to the Laravel backend to delete the record from the database.

Here is an example of how we can create a delete method in our Vue component:

    
        methods: {
            deleteRecord(id) {
                axios.delete(`/api/records/${id}`)
                    .then(response => {
                        // handle success
                    })
                    .catch(error => {
                        // handle error
                    });
            }
        }
    
    

In this example, we are using the axios library to make a delete request to the /api/records/{id} endpoint, where {id} is the ID of the record that we want to delete.

Event Emitting and Listening

After deleting a record, we may want to update the UI to reflect the changes. We can achieve this by emitting an event from the child component (where the delete operation took place) and listening for that event in the parent component (where the UI needs to be updated).

Here is an example of how we can emit an event from the child component:

    
        methods: {
            deleteRecord() {
                // perform delete operation
                this.$emit('recordDeleted', recordId);
            }
        }
    
    

In this example, we are emitting an event called ‘recordDeleted’ and passing the record ID as a parameter.

Now, in the parent component, we can listen for this event and update the UI accordingly:

    
        <child-component v-on:recordDeleted="updateUI"></child-component>

        methods: {
            updateUI(recordId) {
                // update UI logic
            }
        }
    
    

In this example, we are using the v-on directive to listen for the ‘recordDeleted’ event and call the ‘updateUI’ method when the event is emitted.

By using event emitting and listening in Vue JS, we can easily update the UI after performing a delete operation without having to manually refresh the page.

In conclusion, in this article we learned about performing delete operations in a Laravel 9 application using Vue JS and how to emit and listen for events in Vue JS to update the UI after a delete operation. In the next article, we will continue to explore advanced CRUD operations with Laravel 9 and Vue JS.