Snippet

Grouping and Partitioning Reactive Array Data in Vue

Transforming reactive array state with Array.prototype.reduce inside a Vue computed property provides structured, categorized dictionary data that updates automatically upon item changes.

snippet.js

javascript

import { ref, computed } from 'vue';
 
export function useCategorizedProducts(initialList = []) {
  const products = ref(initialList);
 
  const groupedByCategory = computed(() => {
    return products.value.reduce((acc, product) => {
      const category = product.category ?? 'Uncategorized';
      if (!acc[category]) {
        acc[category] = [];
      }
      acc[category].push(product);
      return acc;
    }, {});
  });
 
  return { products, groupedByCategory };
}

vue

Breakdown

const products = ref(initialList);

Initializes a reactive ref containing an array of item objects.

return products.value.reduce((acc, product) => {

Iterates through the reactive array to aggregate items into an object dictionary.

const category = product.category ?? 'Uncategorized';

Uses nullish coalescing to assign a fallback category key for items without one.

acc[category].push(product);

Appends the current item to its matching bucket array.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

Grouping and Partitioning Reactive Array Data in Vue

Related