Custom Search Filter

Custom Search Filter

One of the most useful UI patterns is a real-time search filter — the list updates as the user types. You will build this using a computed property that filters an array based on the search input.

The Search Component

<template>
    <div>
        <input type="text" v-model="search" placeholder="Search blogs...">
        <div v-for="blog in filteredBlogs" :key="blog.id" class="blog-card">
            <h3>{{ blog.title }}</h3>
            <p>{{ blog.body | snippet }}</p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            blogs: [],
            search: ''
        };
    },
    created() {
        this.$http.get('https://jsonplaceholder.typicode.com/posts')
            .then(response => { this.blogs = response.body.slice(0, 20); });
    },
    computed: {
        filteredBlogs() {
            return this.blogs.filter(blog => {
                return blog.title.toLowerCase().includes(this.search.toLowerCase());
            });
        }
    },
    filters: {
        snippet(value) {
            return value.slice(0, 100) + '...';
        }
    }
};
</script>

How It Works

User types in input
    ↓
v-model updates 'search' data
    ↓
'search' is a dependency of 'filteredBlogs' computed property
    ↓
Vue recomputes filteredBlogs (filters the array)
    ↓
v-for re-renders the list with only matching items

Key Takeaways

• Computed properties are perfect for search filters — cached and reactive
• v-model on the search input triggers recomputation automatically
• Use toLowerCase() for case-insensitive matching
• The template stays clean — all logic is in the computed property