Dynamic components with is attribute in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to render a dynamic component using the <component> tag.

Vue

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

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

A"componentName"

B"currentComponent"

C"dynamicComp"

D"activeView"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent variable name.

Forgetting to bind with :is instead of is.

The :is attribute expects the name of the component to render dynamically. Here, componentName is the correct reactive property holding the component name.

2fill in blank

medium

Complete the code to switch the dynamic component based on the currentView data property.

Vue

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

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

A"viewName"

BviewComponent

C"currentView"

DcurrentView

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using a wrong variable name.

The :is attribute should be bound to the variable currentView without quotes to dynamically switch components.

3fill in blank

hard

Fix the error in the code to correctly render the dynamic component stored in selectedComp.

Vue

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

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

A"selectedComp"

BselectedComp

CselectedComponent

D"selectedComponent"

Attempts:

3 left

💡 Hint

Common Mistakes

Using is without colon for dynamic binding.

Putting quotes around the variable name.

To bind dynamically, use :is with the variable name without quotes. Using is without binding treats it as a string literal.

4fill in blank

hard

Fill both blanks to create a dynamic component that switches based on activeTab and passes a prop title.

Vue

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

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

AactiveTab

BtabTitle

C"tabTitle"

D"activeTab"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around variable names in bindings.

Confusing prop names with variable names.

The :is attribute binds to the variable activeTab to select the component. The :title prop binds to the variable tabTitle to pass data.

5fill in blank

hard

Fill all three blanks to render a dynamic component with componentName, pass header prop, and listen to update event.

Vue

<component :is="[1]" :header="[2]" @update="[3]"></component>

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

AcomponentName

BheaderText

ChandleUpdate

DupdateHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around variable names or method names.

Using wrong event handler names.

Bind :is to componentName to select the component. Pass headerText as the header prop. Listen to the update event with the handleUpdate method.