Vue JS Filter by Category, Pagination with Search in Table

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<h3>Vue Js Filter by Category and Pagination with Search </h3>
	<div id="app">
		<label for="category-filter">Filter by category:</label>
		<select id="category-filter" v-model="selectedCategory">
			<option v-for="category in categories" :key="category">{{ category }}</option>
		</select>
		<label for="search-input">Search:</label>
		<input type="text" id="search-input" v-model="searchQuery">
		<table class="developer-table">
			<thead>
				<tr>
					<th>Id</th>
					<th>Developer Name</th>
					<th>Category</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="(item, index) in paginatedItems" :key="item.id">
					<td>{{ item.id }}</td>
					<td>{{ item.name }}</td>
					<td>{{ item.category }}</td>
				</tr>
			</tbody>
		</table>
		<div class="pagination">
			<button :disabled="currentPage === 1" @click="prevPage">Previous</button>
			<span>{{ currentPage }} / {{ totalPages }}</span>
			<button :disabled="currentPage === totalPages" @click="nextPage">Next</button>
       </div>
   </div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					categories: ["All", "Frontend Developer", "Backend Developer", "Full Stack Developer"],
					selectedCategory: "All",
					searchQuery: "",
					items: [
						{ id: 1, name: "John Smith", category: "Frontend Developer" },
						{ id: 2, name: "Sarah Johnson", category: "Backend Developer" },
						{ id: 3, name: "David Chen", category: "Full Stack Developer" },
						{ id: 4, name: "Emily Lee", category: "Backend Developer" },
						{ id: 5, name: "Michael Wong", category: "Full Stack Developer" },
						{ id: 6, name: "Rachel Patel", category: "Frontend Developer" },
						{ id: 7, name: "Kevin Davis", category: "Frontend Developer" },
						{ id: 8, name: "Jennifer Kim", category: "Backend Developer" },
						{ id: 9, name: "James Garcia", category: "Full Stack Developer" },
						{ id: 10, name: "Laura Nguyen", category: "Backend Developer" },
						{ id: 11, name: "Brandon Brown", category: "Full Stack Developer" },
						{ id: 12, name: "Samantha Taylor", category: "Frontend Developer" },
					],
					currentPage: 1,
					itemsPerPage: 3,
				};
			},
			computed: {
				filteredItems() {
					let filteredItems = this.items;
					if (this.selectedCategory !== "All") {
						filteredItems = filteredItems.filter(item => item.category === this.selectedCategory);
					}
					if (this.searchQuery !== "") {
						filteredItems = filteredItems.filter(item => item.name.toLowerCase().includes(this.searchQuery.toLowerCase()));
					}
					return filteredItems;
				},
				totalPages() {
					return Math.ceil(this.filteredItems.length / this.itemsPerPage);
				},
				paginatedItems() {
					const startIndex = (this.currentPage - 1) * this.itemsPerPage;
					return this.filteredItems.slice(startIndex, startIndex + this.itemsPerPage);
				},
			},
			methods: {
				nextPage() {
					if (this.currentPage < this.totalPages) {
						this.currentPage++;
					}
				},
				prevPage() {
					if (this.currentPage > 1) {
						this.currentPage--;
					}
				},
            },
		});
		app.mount('#app');
	</script>
	<style>
		.developer-table {
			border-collapse: collapse;
			width: 100%;
			margin-top: 20px;
			text-align: center;
			font-family: Arial, sans-serif;
			font-size: 14px;
			color: #444444;
		}

.developer-table th,
		.developer-table td {
			border: 1px solid #dddddd;
			padding: 8px;
		}

.developer-table th {
			background-color: #f2f2f2;
			font-weight: bold;
			text-transform: uppercase;
		}

.developer-table tr:nth-child(even) {
			background-color: #f9f9f9;
		}

#category-filter,
		#search-input {
			margin-left: 10px;
		}

#category-filter,
		#search-input {
			font-size: 14px;
			margin-left: 20px;
			padding: 5px;
			border-radius: 3px;
			border: 1px solid #dddddd;
			color: #444444;
		}

label {
			font-size: 16px;
			font-weight: bold;
			color: #444444;
			margin-right: 10px;
			margin-left: 10px;
		}

.pagination {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 20px;
		}

button {
			padding: 10px 20px;
			font-size: 16px;
			font-weight: bold;
			color: #fff;
			background-color: #0077cc;
			border: none;
			border-radius: 5px;
			cursor: pointer;
			margin: 0 10px;
		}

button:disabled {
			opacity: 0.5;
			cursor: not-allowed;
		}

span {
			font-size: 16px;
			margin: 0 10px;
			display: inline-block;
			padding: 5px 10px;
			border: 1px solid #ccc;
			border-radius: 3px;
			text-decoration: none;
			color: #333;
		}
	</style>
</body>
</html>