Skip to content
beginner

Computed Properties

Create computed properties that derive values from reactive state.

import { ref, ________ } from 'vue'

interface CartItem {
  name: string;
  price: number;
  quantity: number;
}

export function useCart() {
  const items = ref<CartItem[]>([])

  const totalItems = computed(() => {
    return items.value.______((sum, item) => sum + item.quantity, 0)
  })

  const totalPrice = computed(() => {
    return items.value.reduce((sum, item) => {
      return __________...
    }, 0)
  })

  const isEmpty = computed(() => __________...)

  function addItem(item: CartItem) {
    items.value.push(item)
  }

  function clearCart() {
    items.value = []
  }

  return { items, totalItems, totalPrice, isEmpty, addItem, clearCart }
}
0/4 filled tab moves · Ctrl+↵ submits · Ctrl+Shift+↵ runsstarter code