Teleport for rendering elsewhere in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to use Teleport to render content in the element with id 'modal'.

Vue

<template>
  <teleport to="[1]">
    <div>This is a modal content.</div>
  </teleport>
</template>

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

A"#modal"

B".modal"

C"modal"

D"#app"

Attempts:

3 left

💡 Hint

Common Mistakes

Using the id without the # symbol in the selector.

Using a class selector instead of an id selector.

Using the wrong target element.

The to attribute in <teleport> requires a CSS selector string. To target an element with id modal, use "#modal".

2fill in blank

medium

Complete the code to teleport a button to the element with id 'popup'.

Vue

<template>
  <teleport to="[1]">
    <button>Click me</button>
  </teleport>
</template>

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

A"#popup"

B"popup"

C".popup"

D"#app"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the # symbol before the id.

Using a class selector instead of an id selector.

Not using quotes around the selector.

The to attribute must be a CSS selector string. To select an element by id 'popup', use "#popup".

3fill in blank

hard

Fix the error in the teleport usage by completing the code.

Vue

<template>
  <teleport [1]="#overlay">
    <p>Overlay content</p>
  </teleport>
</template>

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

Atarget

Bto

Cselector

Dhref

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'target' instead of 'to'.

Using 'href' or 'selector' which are invalid here.

The correct attribute to specify the target element in <teleport> is to.

4fill in blank

hard

Fill both blanks to teleport a div with class 'popup' to the element with id 'container'.

Vue

<template>
  <teleport [1]="[2]">
    <div class="popup">Popup content</div>
  </teleport>
</template>

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

Ato

B"#container"

C"container"

Dtarget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'target' instead of 'to'.

Omitting quotes around the selector.

Using the id without the # symbol.

The to attribute specifies the target selector. The selector string for id 'container' is "#container".

5fill in blank

hard

Fill all three blanks to teleport a paragraph with text 'Hello' to the element with id 'portal' and add an aria-label for accessibility.

Vue

<template>
  <teleport [1]="[2]" [3]="modal content">
    <p>Hello</p>
  </teleport>
</template>

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

Ato

B"#portal"

Caria-label

Drole

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'role' instead of 'aria-label'.

Omitting quotes around the selector string.

Using wrong attribute names.

Use to to specify the target selector "#portal". Add aria-label for accessibility describing the content.