javascript / intermediate
Snippet
Multi-Condition Dynamic Array Filtering Inside Computed Properties
Combining native Array higher-order functions like `filter()` and `every()` inside a Vue `computed` property allows performant multi-attribute filtering. Using short-circuit evaluations and the optional chaining operator (`?.`) prevents runtime errors when evaluating nested properties against dynamic user inputs.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { ref, computed } from 'vue';export function useProductCatalog(initialProducts) {const products = ref(initialProducts);const searchQuery = ref('');const selectedTags = ref([]);const maxPrice = ref(Infinity);const filteredProducts = computed(() => {const query = searchQuery.value.trim().toLowerCase();const requiredTags = selectedTags.value;return products.value.filter(item => {const matchesName = !query || item.name.toLowerCase().includes(query);const matchesPrice = item.price <= maxPrice.value;const matchesTags = requiredTags.length === 0 ||requiredTags.every(tag => item.tags?.includes(tag));return matchesName && matchesPrice && matchesTags;});});return { searchQuery, selectedTags, maxPrice, filteredProducts };}
vue
Breakdown
1
return products.value.filter(item => {
Applies Array.prototype.filter to create a new array containing only matching elements.
2
requiredTags.every(tag => item.tags?.includes(tag));
Ensures the item contains every tag present in the active filter selection using Array.prototype.every.
3
return matchesName && matchesPrice && matchesTags;
Combines all boolean predicate checks using logical AND short-circuiting.