Raw HTML with v-html in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind raw HTML content inside a Vue template using v-html.

Vue

<template>
  <div [1]="rawHtmlContent"></div>
</template>

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

Av-html

Bv-text

Cv-bind

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-text instead of v-html causes HTML tags to show as text.

Using v-show or v-bind does not insert raw HTML.

The v-html directive tells Vue to insert raw HTML inside the element.

2fill in blank

medium

Complete the code to define a reactive raw HTML string in the Vue setup script.

Vue

<script setup>
import { ref } from 'vue'
const rawHtmlContent = [1]('<strong>Hello!</strong>')
</script>

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

Areactive

Bcomputed

Cref

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref causes errors with primitive strings.

Using computed or watch is not for defining reactive values directly.

The ref function creates a reactive reference to a value, here a string with HTML.

3fill in blank

hard

Fix the error in the template by completing the directive to correctly render raw HTML.

Vue

<template>
  <p [1]="rawHtmlContent"></p>
</template>

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

Av-html

Bv-if

Cv-text

Dv-on

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-text instead of v-html.

Using v-if or v-on which do not insert HTML content.

Only v-html renders raw HTML inside the element. Others do not.

4fill in blank

hard

Fill both blanks to create a reactive raw HTML string and bind it in the template.

Vue

<template>
  <div [1]="htmlContent"></div>
</template>

<script setup>
import { [2] } from 'vue'
const htmlContent = [2]('<em>Vue is fun!</em>')
</script>

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

Av-html

Bref

Cv-text

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-text instead of v-html in the template.

Using reactive instead of ref for the string.

Use v-html to bind raw HTML in the template and ref to create a reactive string in the script.

5fill in blank

hard

Fill all three blanks to create a reactive raw HTML string, import the correct function, and bind it in the template.

Vue

<template>
  <section [1]="contentHtml"></section>
</template>

<script setup>
import { [2] } from 'vue'
const contentHtml = [2]('[3]')
</script>

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

Av-html

Bref

C<strong>Welcome!</strong>

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for the string.

Using v-text instead of v-html in the template.

Not providing a valid HTML string.

Use v-html to bind raw HTML, ref to create a reactive string, and provide the HTML string as the value.