Courses

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

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...

This lesson is only for Premium Members.
Want to access all lessons of this course?

You also get:

  • 68 courses (1188 lessons, 43 h 18 min total)
  • Premium tutorials
  • Access to repositories
  • Private Discord