Dynamic render patterns in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the dynamic component name.

Vue

<component :is="[1]"></component>

Drag options to blanks, or click blank then click option'

A"currentView"

BcurrentView

C'currentView'

Dcurrent-view

Attempts:

3 left

💡 Hint

Common Mistakes

Putting quotes around the variable name, making it a string literal.

Using kebab-case instead of camelCase variable.

The :is attribute expects a variable holding the component name without quotes.

2fill in blank

medium

Complete the code to conditionally render a component using <template> and v-if.

Vue

<template v-if="[1] === 'UserProfile'">
  <UserProfile />
</template>

Drag options to blanks, or click blank then click option'

A'UserProfile'

Bcomponent-name

CcomponentName

DuserProfile

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string literal instead of the variable.

Using kebab-case variable names which are invalid in JS.

The variable componentName holds the current component to render.

3fill in blank

hard

Fix the error in the dynamic component binding to avoid runtime error.

Vue

<component :is="[1]"></component>

Drag options to blanks, or click blank then click option'

AcomponentName

BcomponentName()

CcomponentName.value

D'componentName'

Attempts:

3 left

💡 Hint

Common Mistakes

Using .value or () in template binding causing errors.

Putting quotes around the variable name.

When using ref in Vue 3, you must unwrap the value in the template automatically, so just use the variable name.

4fill in blank

hard

Fill both blanks to create a dynamic component with a fallback using <Suspense>.

Vue

<Suspense>
  <template #default>
    <component :is="[1]" />
  </template>
  <template #fallback>
    <div>[2]</div>
  </template>
</Suspense>

Drag options to blanks, or click blank then click option'

AdynamicComponent

B"Loading..."

CloadingText

Ddynamic-component

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the component variable.

Using a variable for fallback text without defining it.

The :is binds to the variable holding the component name, and the fallback shows a loading message string.

5fill in blank

hard

Fill all three blanks to create a dynamic component with props and event binding.

Vue

<component :is="[1]" :title="[2]" @click="[3]" />

Drag options to blanks, or click blank then click option'

AcurrentComponent

BpageTitle

ChandleClick

DclickHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names for props or events.

Missing colon or at-sign for binding.

Bind the dynamic component name, pass the title prop, and attach the click event handler function.

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