Computed in Composition API in Vue - Mini Project: Build & Apply

Using Computed Properties in Vue Composition API

📖 Scenario: You are building a simple Vue 3 app that shows a list of products with their prices. You want to calculate the total price dynamically whenever the prices change.

🎯 Goal: Create a Vue 3 component using the Composition API that holds a list of products and their prices, then use a computed property to calculate the total price. Display the total price in the template.

📋 What You'll Learn

Use the Vue 3 Composition API with setup() function

Create a reactive list of products with names and prices

Create a computed property to calculate the total price

Display the total price in the template inside a <strong> tag

💡 Why This Matters

🌍 Real World

Computed properties are used in Vue apps to automatically update displayed values when underlying data changes, such as totals, filtered lists, or derived states.

💼 Career

Understanding computed properties and the Composition API is essential for modern Vue development, a skill required for frontend developer roles working with Vue.js.

1

Set up the products list

Inside the setup() function, create a reactive variable called products using ref that holds an array of objects with these exact entries: { name: 'Apple', price: 1.2 }, { name: 'Banana', price: 0.8 }, and { name: 'Cherry', price: 2.5 }.

Vue

  
    
  



import { ref } from 'vue'

// Create a reactive variable called products with the given array
// Your code here

Need a hint?

Use ref from Vue to create a reactive array inside setup().

2

Create a computed property for total price

Import computed from 'vue' and create a computed property called totalPrice that calculates the sum of all price values in the products array.

Vue

  
    
  



import { ref, computed } from 'vue'

const products = ref([
  { name: 'Apple', price: 1.2 },
  { name: 'Banana', price: 0.8 },
  { name: 'Cherry', price: 2.5 }
])

// Create a computed property called totalPrice that sums all product prices
// Your code here

Need a hint?

Use computed to create totalPrice that sums prices using reduce.

3

Display the total price in the template

Inside the <div> in the template, add a <strong> tag that shows the text Total Price: followed by the value of totalPrice. Use Vue's mustache syntax {{ }} to bind the computed value.

Vue

  
     tag to display totalPrice here -->
    
  



import { ref, computed } from 'vue'

const products = ref([
  { name: 'Apple', price: 1.2 },
  { name: 'Banana', price: 0.8 },
  { name: 'Cherry', price: 2.5 }
])

const totalPrice = computed(() => {
  return products.value.reduce((sum, product) => sum + product.price, 0)
})

Need a hint?

Use {{ totalPrice }} inside a <strong> tag to show the computed value.

4

Add product list display

Below the <strong> tag, add an unordered list <ul>. Use v-for with product and index to loop over products. Inside the loop, display each product's name and price in a list item <li>. Add a unique :key binding using index.

Vue

  
    Total Price: {{ totalPrice }}
     with v-for to list products here -->
    
  



import { ref, computed } from 'vue'

const products = ref([
  { name: 'Apple', price: 1.2 },
  { name: 'Banana', price: 0.8 },
  { name: 'Cherry', price: 2.5 }
])

const totalPrice = computed(() => {
  return products.value.reduce((sum, product) => sum + product.price, 0)
})

Need a hint?

Use v-for="(product, index) in products" on <li> with :key="index" to list each product's name and price.