Courses

Vue.js 3 + Laravel 11 + Vite: SPA CRUD

Category Dropdown: Filtering Data

Now that we have a select input for the category, let's make it work as a filter. After selecting a category, the list should show only the posts that only belong to that category.

selected category filter


Vue: Watch the Selected Category

To get all the posts that belong to a category, we need to watch the selectedCategory variable. First, we need to import watch from the Vue.

resources/js/components/Posts/Index.vue:

<template>
// ...
</template>
 
<script setup>
import { onMounted, ref } from "vue";
import { onMounted, ref, watch } from "vue";
import { TailwindPagination } from 'laravel-vue-pagination';
import usePosts from "@/composables/posts";
import useCategories from "@/composables/categories";
// ...
</script>

Now using this watch() function, we can watch the selectedCategory variable for the changes with two values: current and previous.

Inside watch we can call the...

The full lesson is only for Premium Members.
Want to access all 27 lessons of this course? (115 min read)

You also get:

  • 69 courses (majority in latest Laravel 11)
  • Premium tutorials
  • Access to repositories
  • Private Discord