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'.

Practice

1. What does the :is directive do in Vue's dynamic render patterns?

easy

A. It dynamically switches which component or element to render.

B. It binds a CSS class to an element.

C. It listens for user input events.

D. It creates a loop to render multiple items.

Solution

1. Step 1: Understand the purpose of :is

   The :is directive in Vue allows you to dynamically choose which component or HTML element to render based on a variable.

2. Step 2: Compare with other directives

   Unlike class binding or event listening, :is changes the actual rendered tag or component, making the UI flexible.

3. Final Answer:

   It dynamically switches which component or element to render. -> Option A

4. Quick Check:

   :is = dynamic component switch [OK]

Hint: Remember :is changes the tag or component shown [OK]

Common Mistakes:

• Confusing :is with event handlers
• Thinking :is binds CSS classes
• Assuming :is creates loops

2. Which of the following is the correct syntax to conditionally render a component in Vue using v-if?

easy

A. <MyComponent :is='show' />

B. <MyComponent v-if='show' />

C. <MyComponent v-for='show' />

D. <MyComponent v-show='show' />

Solution

1. Step 1: Identify the directive for conditional rendering

   v-if is used to conditionally render elements or components based on a boolean expression.

2. Step 2: Check the syntax correctness

   The syntax <MyComponent v-if='show' /> correctly applies v-if to render MyComponent only if show is true.

3. Final Answer:

   <MyComponent v-if='show' /> -> Option B

4. Quick Check:

   v-if = conditional render [OK]

Hint: Use v-if to show/hide components conditionally [OK]

Common Mistakes:

• Confusing v-if with v-show
• Using v-for for conditional rendering
• Misusing :is for boolean conditions

3. Given the Vue template:

<component :is="currentView" />

and the data:

data() { return { currentView: 'HomeView' } }

What will be rendered if HomeView is a registered component?

medium

A. An error will occur because component tag is invalid.

B. Nothing will render because currentView is a string.

C. The literal text 'HomeView' will be shown.

D. The HomeView component will be rendered.

Solution

1. Step 1: Understand <component :is=... /> usage

   The <component> tag with :is dynamically renders the component named by the string in currentView.

2. Step 2: Check if HomeView is registered

   Since HomeView is registered, Vue will render that component in place of <component>.

3. Final Answer:

   The HomeView component will be rendered. -> Option D

4. Quick Check:

   Dynamic component name string renders component [OK]

Hint: Dynamic :is renders component named by string [OK]

Common Mistakes:

• Thinking string names don't render components
• Confusing component tag as invalid HTML
• Expecting literal text instead of component

4. What is wrong with this Vue template snippet?

<component :is="viewName" v-if="viewName" />

where viewName can be null or a component name string.

medium

A. It will throw an error if viewName is null.

B. The :is binding must be a component object, not a string.

C. There is no problem; it works correctly.

D. The v-if should be replaced with v-show.

Solution

1. Step 1: Analyze v-if="viewName" behavior

   The v-if prevents rendering when viewName is null or falsy, so the component won't render or cause errors.

2. Step 2: Check :is binding type

   :is accepts a string naming a registered component or a component object, so a string is valid.

3. Final Answer:

   There is no problem; it works correctly. -> Option C

4. Quick Check:

   v-if blocks null, :is accepts string [OK]

Hint: v-if prevents null rendering errors [OK]

Common Mistakes:

• Assuming null causes errors without v-if
• Confusing v-show with v-if
• Thinking :is only accepts objects

5. You want to render a list of components dynamically based on an array of component names, but only if the component name is not empty. Which Vue pattern correctly achieves this?

hard

A. <template>
<component
v-for="name in componentNames"
:key="name"
:is="name"
v-if="name"
/>
</template>

B. <template>
<component
v-for="name in componentNames"
:key="name"
:is="name"
/>
</template>

C. <template>
<component
v-if="componentNames.length"
:is="componentNames"
/>
</template>

D. <template>
<component
v-for="(name, index) in componentNames"
:key="index"
:is="name"
v-show="name"
/>
</template>

Solution

1. Step 1: Use v-for to loop over component names

   Looping over componentNames with v-for renders multiple components dynamically.

2. Step 2: Filter out empty names with v-if="name"

   Adding v-if="name" ensures only non-empty strings render components, avoiding errors or empty renders.

3. Step 3: Use :key with unique name for list rendering

   Using :key="name" helps Vue track each component efficiently.

4. Final Answer:

   Option A correctly loops, filters, and renders components dynamically. -> Option A

5. Quick Check:

   Loop + v-if filter + :is = correct pattern [OK]

Hint: Use v-for with v-if to filter dynamic components [OK]

Common Mistakes:

• Not filtering empty names causing errors
• Using v-if on parent instead of each item
• Missing :key in loops