JavaScript expressions in templates in Vue - Mini Project: Build & Apply

JavaScript expressions in templates

📖 Scenario: You are building a simple Vue 3 app that shows a list of products with their prices and discounts. You want to display the final price after applying the discount using JavaScript expressions directly inside the template.

🎯 Goal: Create a Vue 3 component that uses JavaScript expressions inside the template to calculate and display the discounted price for each product.

📋 What You'll Learn

Create a reactive array of products with name, price, and discount percentage

Add a variable for a minimum discount threshold

Use JavaScript expressions in the template to calculate the discounted price only for products with discount above the threshold

Display the product name and the calculated discounted price in the template

💡 Why This Matters

🌍 Real World

Using JavaScript expressions in templates is common when you want to show dynamic values based on data without writing extra methods or computed properties.

💼 Career

Front-end developers often need to display calculated values in UI frameworks like Vue. Understanding expressions in templates helps build interactive and efficient user interfaces.

1

Setup the products data

Create a reactive array called products with these exact objects: { name: 'Shoes', price: 100, discount: 10 }, { name: 'Hat', price: 50, discount: 5 }, and { name: 'Jacket', price: 200, discount: 20 } inside the <script setup> block.

Vue

// Create the products array here




  

Hint

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

2

Add a discount threshold variable

Inside the <script setup> block, create a constant called minDiscount and set it to 10.

Vue

import { ref } from 'vue'

const products = ref([
  { name: 'Shoes', price: 100, discount: 10 },
  { name: 'Hat', price: 50, discount: 5 },
  { name: 'Jacket', price: 200, discount: 20 }
])

// Create minDiscount constant here




  

Hint

Just add const minDiscount = 10 inside the <script setup> block.

3

Use JavaScript expressions in the template

In the <template>, use a v-for directive with product and index to loop over products. Inside the loop, display the product's name and the discounted price calculated as product.price * (1 - product.discount / 100) only if product.discount is greater than or equal to minDiscount. Use a JavaScript expression with a ternary operator to show the discounted price or the original price accordingly.

Vue

import { ref } from 'vue'

const products = ref([
  { name: 'Shoes', price: 100, discount: 10 },
  { name: 'Hat', price: 50, discount: 5 },
  { name: 'Jacket', price: 200, discount: 20 }
])

const minDiscount = 10



  
    
  

Hint

Use v-for="(product, index) in products" and inside double curly braces use a ternary expression to calculate the discounted price or show original price.

4

Add accessibility and final touches

Add a role="list" attribute to the <ul> element and a role="listitem" attribute to each <li> element for accessibility. Also, add a class="product-list" to the <ul> and class="product-item" to each <li>.

Vue

import { ref } from 'vue'

const products = ref([
  { name: 'Shoes', price: 100, discount: 10 },
  { name: 'Hat', price: 50, discount: 5 },
  { name: 'Jacket', price: 200, discount: 20 }
])

const minDiscount = 10



  
    
      
    
  

Hint

Add role="list" and class="product-list" to the <ul>. Add role="listitem" and class="product-item" to each <li>.

Practice

1. In Vue templates, which syntax correctly inserts a JavaScript expression to display a variable named message?

easy

A. [[ message ]]

B. { message }

C. {{ message }}

D. ${ message }

Solution

1. Step 1: Recognize Vue interpolation syntax

   Vue uses double curly braces {{ }} to insert JavaScript expressions in templates.

2. Step 2: Match the correct syntax for variable display

   The correct way to show the value of message is {{ message }}.

3. Final Answer:

   <code>{{ message }}</code> -> Option C

4. Quick Check:

   Vue interpolation = {{ }} [OK]

Hint: Use double curly braces {{ }} to insert expressions [OK]

Common Mistakes:

• Using single curly braces or square brackets
• Trying to use template literals syntax inside templates
• Forgetting to use any braces

2. Which of the following is the correct way to write a simple math expression inside a Vue template to add 5 and 3?

easy

A. {{ 5 & 3 }}

B. {{ 5 + 3 }}

C. {{ add(5, 3) }}

D. {{ '5' + '3' }}

Solution

1. Step 1: Understand expression evaluation in Vue templates

   Vue evaluates JavaScript expressions inside {{ }} as normal JavaScript.

2. Step 2: Identify the correct math addition expression

   5 + 3 correctly adds numbers to get 8. {{ '5' + '3' }} concatenates strings, {{ add(5, 3) }} calls an undefined function, and {{ 5 & 3 }} uses bitwise AND.

3. Final Answer:

   <code>{{ 5 + 3 }}</code> -> Option B

4. Quick Check:

   Math addition uses + inside {{ }} [OK]

Hint: Use normal JavaScript math inside {{ }} [OK]

Common Mistakes:

• Using string quotes for numbers causing concatenation
• Calling undefined functions inside templates
• Using bitwise operators instead of arithmetic

3. Given the Vue data property count: 4, what will be displayed by this template snippet?

<div>{{ count * 2 }}</div>

medium

A. 8

B. count * 2

C. 4 * 2

D. undefined

Solution

1. Step 1: Evaluate the expression inside the template

   The expression count * 2 multiplies the value of count (which is 4) by 2.

2. Step 2: Calculate the result

   4 multiplied by 2 equals 8, so the template will display 8.

3. Final Answer:

   8 -> Option A

4. Quick Check:

   4 * 2 = 8 [OK]

Hint: Multiply variables directly inside {{ }} [OK]

Common Mistakes:

• Expecting the expression to print as text
• Confusing variable name with string
• Assuming undefined if variable is not reactive

4. What is wrong with this Vue template expression?

<div>{{ user.name.toUpperCase }}</div>

Assuming user.name is a string.

medium

A. toUpperCase is not a valid method

B. Cannot use functions inside templates

C. user.name is undefined

D. Missing parentheses to call the function

Solution

1. Step 1: Identify the method usage error

   toUpperCase is a function and must be called with parentheses ().

2. Step 2: Correct the expression

   The correct expression is user.name.toUpperCase() to get the uppercase string.

3. Final Answer:

   Missing parentheses to call the function -> Option D

4. Quick Check:

   Call methods with () inside {{ }} [OK]

Hint: Always add () when calling functions in templates [OK]

Common Mistakes:

• Forgetting parentheses on method calls
• Trying to use unsupported functions
• Assuming properties auto-call functions

5. You want to display a list of numbers doubled inside a Vue template using numbers = [1, 2, 3]. Which expression correctly creates a comma-separated string of doubled numbers?

hard

A. {{ numbers.map(n => n * 2).join(', ') }}

B. {{ numbers * 2 }}

C. {{ numbers.forEach(n => n * 2) }}

D. {{ numbers.map(n => n * 2) }}

Solution

1. Step 1: Understand array transformation in templates

   To double each number, use map with a function n => n * 2.

2. Step 2: Convert the array to a string

   Using join(', ') converts the array to a comma-separated string for display.

3. Final Answer:

   <code>{{ numbers.map(n => n * 2).join(', ') }}</code> -> Option A

4. Quick Check:

   Use map + join for array display [OK]

Hint: Use map() then join() to show transformed arrays [OK]

Common Mistakes:

• Trying to multiply array directly
• Using forEach which returns undefined
• Not joining array to string for display