Dynamic render patterns in Vue - Mini Project: Build & Apply

Dynamic Render Patterns in Vue

📖 Scenario: You are building a simple Vue app that shows a list of products. Each product can be shown in different styles depending on user choice.

🎯 Goal: Create a Vue component that dynamically renders product items using different HTML tags based on a configuration variable.

📋 What You'll Learn

Create a list of products with exact names and prices

Add a configuration variable to choose the HTML tag for rendering

Use Vue's component tag with :is binding to render products dynamically

Render the product name and price inside the chosen tag

💡 Why This Matters

🌍 Real World

Dynamic rendering is useful when you want to reuse components but change their HTML structure based on user preferences or device types.

💼 Career

Understanding dynamic render patterns is important for building flexible and maintainable Vue applications that adapt to different UI needs.

1

Create the product list data

Create a products array in the setup function with these exact objects: { name: 'Apple', price: 1.2 }, { name: 'Banana', price: 0.5 }, and { name: 'Cherry', price: 2.0 }.

Vue

// Create the products array here
// Your code here

Hint

Use const products = [ ... ] inside <script setup>.

2

Add a dynamic tag configuration

Add a ref variable called tag in the setup function and set it to the string 'li'.

Vue

const products = [
  { name: 'Apple', price: 1.2 },
  { name: 'Banana', price: 0.5 },
  { name: 'Cherry', price: 2.0 }
]

// Add the tag ref variable here
// Your code here

Hint

Import ref from Vue and create const tag = ref('li').

3

Render products dynamically using the tag

In the template, use a ul element. Inside it, use a v-for loop with product and index over products. For each product, use the component tag with :is="tag" to render the product's name and price inside the dynamic tag.

Vue

import { ref } from 'vue'

const products = [
  { name: 'Apple', price: 1.2 },
  { name: 'Banana', price: 0.5 },
  { name: 'Cherry', price: 2.0 }
]

const tag = ref('li')




  
  
  

Hint

Use <component :is="tag"> inside a v-for loop to render each product.

4

Add a select to change the tag dynamically

Above the ul, add a select element with v-model="tag". Add three option elements with values 'li', 'div', and 'p'. This lets the user change the tag used for rendering products dynamically.

Vue

import { ref } from 'vue'

const products = [
  { name: 'Apple', price: 1.2 },
  { name: 'Banana', price: 0.5 },
  { name: 'Cherry', price: 2.0 }
]

const tag = ref('li')






  
    {{ product.name }} - ${{ product.price }}
  

Hint

Use <select v-model="tag"> with three <option> elements for 'li', 'div', and 'p'.