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.