Dynamic components with is attribute in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue dynamic component render?

Given the following Vue 3 component setup, what will be rendered inside the <component :is="currentComp" />?

Vue

<template>
  <component :is="currentComp" />
</template>

<script setup>
import { ref } from 'vue'

const HelloComp = {
  template: '<p>Hello!</p>'
}

const ByeComp = {
  template: '<p>Goodbye!</p>'
}

const currentComp = ref(HelloComp)
</script>

A <p>Goodbye!</p>

B <p>Hello!</p>

C Nothing renders because components are not globally registered

D Error: Unknown component 'HelloComp'

💡 Hint

Think about what the is attribute does and how the component name is resolved.

The component tag with :is="currentComp" renders the component referenced by currentComp. Since currentComp holds HelloComp, which is locally defined, Vue renders its template: Hello!.

❓ state_output

intermediate

What is the value of currentComp after clicking the button?

Consider this Vue 3 component:

<template>
  <component :is="currentComp" />
  <button @click="toggleComp">Toggle</button>
</template>

<script setup>
import { ref } from 'vue'

const currentComp = ref('CompA')

function toggleComp() {
  currentComp.value = currentComp.value === 'CompA' ? 'CompB' : 'CompA'
}
</script>

Initially, currentComp is 'CompA'. What is its value after the button is clicked twice?

A Error: currentComp is not reactive

B CompB

C CompA

D undefined

💡 Hint

Each click toggles the component name. Think about toggling twice.

The toggleComp function switches currentComp between 'CompA' and 'CompB'. Starting at 'CompA', one click changes it to 'CompB', the second click changes it back to 'CompA'.

📝 Syntax

advanced

Which option correctly uses the is attribute with a dynamic component in Vue 3?

Choose the correct syntax to render a dynamic component using the is attribute bound to a variable currentView.

A <component v-bind:is="currentView" />

B <component is="currentView" />

C <component :is='currentView'/>

D <component :is="currentView" />

💡 Hint

Remember how to bind attributes dynamically in Vue templates.

In Vue, to bind an attribute dynamically, you use : (shorthand) or v-bind:. Option D uses the preferred shorthand :is="currentView". Option D treats is as a static string, not dynamic. Option D uses full v-bind:is="currentView", which works but is more verbose. Option D uses single quotes for the expression, which is valid but Vue style guide prefers double quotes for attribute values.

🔧 Debug

advanced

Why does this dynamic component fail to render?

Given this Vue 3 code snippet:

<template>
  <component :is="currentComp" />
</template>

<script setup>
import { ref } from 'vue'

const MyComp = {
  template: '<p>Hi there</p>'
}

const currentComp = ref('MyComp')
</script>

Why does the component not render and show an error?

A MyComp is not registered globally or locally, so Vue cannot find it

B The template string in MyComp is invalid HTML

C The ref variable currentComp should not be reactive for dynamic components

D The component tag must be self-closing with a slash

💡 Hint

Think about how Vue finds components by name.

Vue needs components to be registered either globally or locally to render them by name. Here, MyComp is defined but not registered or exposed, so Vue cannot find it when currentComp is 'MyComp'.

🧠 Conceptual

expert

What is the main advantage of using the is attribute for dynamic components in Vue?

Choose the best explanation for why Vue developers use the is attribute to render dynamic components.

A It allows switching between different components at runtime without changing the template structure

B It improves performance by caching all components automatically

C It forces Vue to render components only once and never update them

D It enables using components without importing or registering them

💡 Hint

Think about flexibility in UI rendering.

The is attribute lets Vue render different components dynamically based on data or state. This means you can switch which component shows without rewriting the template, making UI flexible and easier to manage.