Filtering Appointments with active tab and dynamic status using Vue 3 and Laravel | Part 26

In this tutorial, we will be learning how to filter appointments with active tab and dynamic status using Vue 3 and Laravel. This will help us to easily manage and organize appointments based on their status.

Prerequisites

• Basic knowledge of HTML, CSS, and JavaScript
• Understanding of Vue 3 and Laravel

Setting up the project

First, we need to set up a new Vue 3 and Laravel project. We can do this by using the Vue CLI and Laravel’s composer. Once the project is set up, we can start by creating a new component for the appointments list and another component for the tabs.

Creating the tabs component

We will start by creating the tabs component, which will be responsible for displaying the active tab and allowing the user to toggle between different status filters. We can use Vue’s computed properties to dynamically filter the appointments based on the active tab.

“`html

export default {
data() {
return {
activeTab: ‘all’
}
},
methods: {
filterAppointments(status) {
this.activeTab = status;
// Call a method to filter appointments based on the status
}
}
}

.activeTab {
background-color: #f0f0f0;
}

“`

Creating the appointments list component

Next, we will create the appointments list component, where we will display the appointments based on the active tab. We can use Vue’s v-for directive to loop through the filtered appointments and display them in the list.

“`html

export default {
props: {
appointments: Array,
activeTab: String
},
computed: {
filteredAppointments() {
if (this.activeTab === ‘all’) {
return this.appointments;
} else {
return this.appointments.filter(appointment => appointment.status === this.activeTab);
}
}
}
}

“`

Integrating with Laravel

Finally, we can integrate these components with our Laravel backend to fetch appointments from the database and pass them to the appointments list component. We can use Laravel’s Eloquent ORM to query the appointments based on their status and send the filtered results to the Vue component.

Conclusion

By following this tutorial, we have successfully learned how to filter appointments with active tab and dynamic status using Vue 3 and Laravel. This will help us to provide a better user experience and easily manage appointments based on their status.