Computed properties for derived state in Vue - Mini Project: Build & Apply

Computed properties for derived state

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

🎯 Goal: Create a Vue 3 component that uses a computed property to calculate the total price from a list of products.

📋 What You'll Learn

Create a reactive list of products with name and price

Add a reactive variable for a discount percentage

Use a computed property to calculate the total price after discount

Display the product names, prices, and the discounted total price

💡 Why This Matters

🌍 Real World

Calculating totals and discounts is common in shopping carts and sales dashboards.

💼 Career

Understanding computed properties is essential for building efficient, reactive Vue applications that update UI automatically.

1

Setup the products list

Create a reactive variable called products using ref that holds an array of objects. Each object should have name and price properties with these exact values: { name: 'Apple', price: 100 }, { name: 'Banana', price: 50 }, and { name: 'Cherry', price: 75 }.

Vue

import { ref } from 'vue'

// Create the reactive products list here
// Your code here



  

Hint

Use ref from Vue to create a reactive array named products with the exact objects inside.

2

Add a discount percentage

Create a reactive variable called discount using ref and set it to 10 to represent a 10% discount.

Vue

import { ref } from 'vue'

const products = ref([
  { name: 'Apple', price: 100 },
  { name: 'Banana', price: 50 },
  { name: 'Cherry', price: 75 }
])

// Create the discount reactive variable here
// Your code here



  

Hint

Use ref to create a reactive variable named discount and set it to 10.

3

Create a computed property for total price after discount

Import computed from 'vue'. Create a computed property called totalPrice that calculates the sum of all product prices from products.value and then applies the discount percentage from discount.value. Use this formula: sum of prices * (1 - discount / 100).

Vue

import { ref, computed } from 'vue'

const products = ref([
  { name: 'Apple', price: 100 },
  { name: 'Banana', price: 50 },
  { name: 'Cherry', price: 75 }
])

const discount = ref(10)

// Create the computed property totalPrice here
// Your code here



  

Hint

Use computed to create totalPrice. Use reduce on products.value to sum prices, then apply the discount.

4

Display products and total price in template

In the <template>, use a v-for directive to list each product's name and price. Below the list, display the text Total Price after discount: followed by the totalPrice value formatted with toFixed(2).

Vue

import { ref, computed } from 'vue'

const products = ref([
  { name: 'Apple', price: 100 },
  { name: 'Banana', price: 50 },
  { name: 'Cherry', price: 75 }
])

const discount = ref(10)

const totalPrice = computed(() => {
  const sum = products.value.reduce((acc, product) => acc + product.price, 0)
  return sum * (1 - discount.value / 100)
})



  
    
    
  
  
  

Hint

Use v-for to loop over products and show name and price. Then show totalPrice.toFixed(2) below.

Practice

1. What is the main purpose of a computed property in Vue?

easy

A. To directly modify the DOM elements

B. To store static data that never changes

C. To create a value that updates automatically when its dependencies change

D. To replace methods for event handling

Solution

1. Step 1: Understand computed property role

   Computed properties automatically update when their reactive dependencies change, unlike static data.

2. Step 2: Compare with other options

   Static data does not update automatically, DOM manipulation is done differently, and event handling uses methods or event listeners.

3. Final Answer:

   To create a value that updates automatically when its dependencies change -> Option C

4. Quick Check:

   Computed properties = auto-updating values [OK]

Hint: Computed properties auto-update when data changes [OK]

Common Mistakes:

• Thinking computed properties store static data
• Confusing computed with methods for events
• Assuming computed directly changes the DOM

2. Which of the following is the correct syntax to define a computed property named fullName using Vue's Composition API?

easy

A. const fullName = computed(() => firstName + ' ' + lastName)

B. const fullName = computed { return firstName + ' ' + lastName }

C. const fullName = computed(() => { firstName + ' ' + lastName })

D. const fullName = computed(() => firstName.concat(lastName))

Solution

1. Step 1: Check correct computed syntax

   Vue's computed expects a function returning a value, so arrow function with parentheses and return expression is correct.

2. Step 2: Analyze each option

   const fullName = computed(() => fullName + ' ' + lastName) uses arrow function returning concatenated string correctly. const fullName = computed { return firstName + ' ' + lastName } has wrong syntax (missing parentheses). const fullName = computed(() => { firstName + ' ' + lastName }) lacks return statement in block. const fullName = computed(() => firstName.concat(lastName)) uses concat without space.

3. Final Answer:

   const fullName = computed(() => firstName + ' ' + lastName) -> Option A

4. Quick Check:

   Correct computed syntax = const fullName = computed(() => firstName + ' ' + lastName) [OK]

Hint: Use arrow function with return expression inside computed [OK]

Common Mistakes:

• Omitting parentheses in computed call
• Forgetting return in block arrow function
• Using string concat without space

3. Given the following Vue setup code, what will be the output of fullName.value?

import { ref, computed } from 'vue'
const firstName = ref('Jane')
const lastName = ref('Doe')
const fullName = computed(() => firstName.value + ' ' + lastName.value)

firstName.value = 'John'

medium

A. undefined

B. "Jane Doe"

C. "Jane John"

D. "John Doe"

Solution

1. Step 1: Understand reactive refs and computed

   firstName and lastName are reactive refs. Changing firstName.value updates computed fullName automatically.

2. Step 2: Evaluate fullName after update

   After setting firstName.value = 'John', fullName.value becomes 'John Doe' because computed uses current ref values.

3. Final Answer:

   "John Doe" -> Option D

4. Quick Check:

   Computed updates with ref changes = "John Doe" [OK]

Hint: Computed reflects latest ref values automatically [OK]

Common Mistakes:

• Assuming computed keeps old value
• Ignoring .value when accessing refs
• Confusing variable names in output

4. Identify the error in this Vue computed property code:

import { ref, computed } from 'vue'
const count = ref(0)
const doubleCount = computed(() => {
  count + 2
})

medium

A. Missing return statement inside computed function

B. count should not be a ref

C. computed should be imported from 'vuex'

D. doubleCount should be a method, not computed

Solution

1. Step 1: Check computed function body

   The arrow function uses braces but does not return a value explicitly, so it returns undefined.

2. Step 2: Correct usage

   Either remove braces or add a return statement to return count.value + 2.

3. Final Answer:

   Missing return statement inside computed function -> Option A

4. Quick Check:

   Computed with braces needs return [OK]

Hint: Add return when using braces in arrow function [OK]

Common Mistakes:

• Forgetting return in block arrow functions
• Importing computed from wrong package
• Misusing ref as normal variable

5. You have a list of products with prices and quantities as refs. How would you create a computed property totalPrice that sums the product of price and quantity for all products? Choose the correct computed property code snippet:

hard

A. const totalPrice = computed(() => products.reduce((sum, p) => sum + p.price * p.quantity, 0))

B. const totalPrice = computed(() => products.value.reduce((sum, p) => sum + p.price.value * p.quantity.value, 0))

C. const totalPrice = computed(() => { products.value.forEach(p => sum += p.price.value * p.quantity.value); return sum })

D. const totalPrice = computed(() => products.value.map(p => p.price.value * p.quantity.value))

Solution

1. Step 1: Understand data structure and refs

   Each product has price and quantity as refs, so access with .value. products is a ref array, so use products.value.

2. Step 2: Choose correct aggregation method

   Use reduce to sum all price * quantity values. const totalPrice = computed(() => products.value.reduce((sum, p) => sum + p.price.value * p.quantity.value, 0)) correctly uses reduce with .value access and initial sum 0.

3. Step 3: Analyze incorrect options

   const totalPrice = computed(() => products.reduce((sum, p) => sum + p.price * p.quantity, 0)) misses .value on refs. const totalPrice = computed(() => { products.value.forEach(p => sum += p.price.value * p.quantity.value); return sum }) uses forEach but sum is undefined. const totalPrice = computed(() => products.value.map(p => p.price.value * p.quantity.value)) returns array, not sum.

4. Final Answer:

   const totalPrice = computed(() => products.value.reduce((sum, p) => sum + p.price.value * p.quantity.value, 0)) -> Option B

5. Quick Check:

   Use reduce with .value refs to sum totals [OK]

Hint: Use reduce with .value to sum reactive refs [OK]

Common Mistakes:

• Forgetting .value on refs inside products
• Using map instead of reduce for sum
• Not initializing sum in reduce