How to combine filters with computed properties in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Combining multiple filtering operations on data is common in Vue applications, from search functionality to multi-criteria filtering. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented complex filtering logic in Vue applications throughout my 11 years of framework development. The most efficient approach is using computed properties to chain filter operations, leveraging Vue’s reactivity system for automatic updates. This method keeps your template clean while providing optimal performance through caching.
Use computed properties to chain multiple filter operations on your data.
export default {
setup() {
const items = ref([
{ name: 'Apple', category: 'fruit', price: 1.2 },
{ name: 'Carrot', category: 'vegetable', price: 0.8 },
{ name: 'Banana', category: 'fruit', price: 0.5 }
])
const searchTerm = ref('')
const selectedCategory = ref('')
const maxPrice = ref(10)
const filteredItems = computed(() => {
return items.value
.filter(item => item.name.toLowerCase().includes(searchTerm.value.toLowerCase()))
.filter(item => !selectedCategory.value || item.category === selectedCategory.value)
.filter(item => item.price <= maxPrice.value)
})
return { searchTerm, selectedCategory, maxPrice, filteredItems }
}
}
Here the computed property chains multiple filter operations, each checking a different criterion. Vue automatically re-evaluates the computed property when any dependency changes, ensuring the filtered list stays synchronized with user input. The chaining approach makes it easy to add or remove filters, and the computed result is cached until dependencies change.
Best Practice Note:
This is the pattern we use in CoreUI Vue components for advanced data table filtering. For large datasets, consider using a single filter with combined conditions instead of chaining to reduce array iterations, and debounce text input filters to avoid excessive recalculations.
