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.

Practice

1. What does the v-html directive do in Vue?

easy

A. It listens for user input events.

B. It binds a JavaScript object to the element.

C. It inserts raw HTML content inside an element.

D. It applies CSS styles dynamically.

Solution

1. Step 1: Understand the purpose of v-html

   The v-html directive is used to insert raw HTML content inside an element in Vue.

2. Step 2: Compare with other options

   Other options describe different Vue features like event listening or styling, which are unrelated to v-html.

3. Final Answer:

   It inserts raw HTML content inside an element. -> Option C

4. Quick Check:

   v-html = inserts raw HTML [OK]

Hint: Remember: v-html inserts raw HTML inside elements [OK]

Common Mistakes:

• Confusing v-html with event binding
• Thinking v-html applies styles
• Assuming v-html binds JavaScript objects

2. Which of the following is the correct syntax to use v-html in a Vue template?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify correct directive syntax

   The correct directive to insert raw HTML is v-html, used as v-html="rawHtml".

2. Step 2: Check other options for correctness

   uses a non-existent directive :html.

   uses v-text which inserts plain text, not HTML.

   uses an invalid directive v-bind-html.

3. Final Answer:

   <div v-html="rawHtml"></div> -> Option B

4. Quick Check:

   Correct syntax = v-html="variable" [OK]

Hint: Use v-html="variable" to insert raw HTML [OK]

Common Mistakes:

• Using v-text instead of v-html
• Trying v-bind-html which is invalid
• Using shorthand :html which doesn't exist

3. Given the Vue template and data below, what will be rendered inside the div?

<template>
  <div v-html="htmlContent"></div>
</template>

<script setup>
const htmlContent = '<strong>Hello</strong> <em>Vue</em>!'
</script>

medium

A. Hello Vue! (formatted with bold and italic)

B. <strong>Hello</strong> <em>Vue</em>! (raw text with tags visible)

C. Hello Vue! (plain text without formatting)

D. An error occurs because of invalid HTML

Solution

1. Step 1: Understand v-html rendering

   The v-html directive inserts the HTML string as actual HTML, so tags like <strong> and <em> become formatted text.

2. Step 2: Analyze the given HTML string

   The string contains <strong>Hello</strong> and <em>Vue</em>, so the output will show "Hello" in bold and "Vue" in italic.

3. Final Answer:

   <strong>Hello</strong> <em>Vue</em>! (formatted with bold and italic) -> Option A

4. Quick Check:

   v-html renders HTML tags as formatted content [OK]

Hint: v-html renders HTML tags as formatted content, not plain text [OK]

Common Mistakes:

• Expecting raw HTML tags to show as text
• Confusing v-html with v-text
• Assuming an error occurs with HTML tags

4. What is the main issue with this Vue template?

<template>
  <div v-html=htmlContent></div>
</template>

<script setup>
const htmlContent = '<p>Hello</p>'
</script>

medium

A. The v-html directive is missing quotes around the binding expression.

B. The htmlContent variable is not reactive.

C. The HTML string is invalid and causes an error.

D. v-html cannot be used inside a <div> element.

Solution

1. Step 1: Check v-html syntax

   The directive value must be quoted, like v-html="htmlContent". Here it is missing quotes.

2. Step 2: Verify other options

   The variable is valid and reactive by default. The HTML string is valid. v-html works on any element including div.

3. Final Answer:

   The v-html directive is missing quotes around the binding expression. -> Option A

4. Quick Check:

   v-html value must be quoted [OK]

Hint: Always put quotes around v-html binding expressions [OK]

Common Mistakes:

• Omitting quotes around v-html value
• Thinking v-html only works on certain tags
• Assuming HTML string causes errors

5. You want to display user-generated HTML safely using v-html. Which approach helps prevent security risks?

hard

A. Use v-html directly without any checks.

B. Replace v-html with v-text to render HTML tags.

C. Escape all HTML tags and then use v-html.

D. Sanitize the HTML string before binding it to v-html.

Solution

1. Step 1: Understand security risks of v-html

   Using v-html with user input can cause cross-site scripting (XSS) attacks if the HTML is not safe.

2. Step 2: Identify safe usage

   Sanitizing the HTML string removes dangerous code before inserting it, making it safe to use with v-html.

3. Step 3: Evaluate other options

   Using v-html directly is unsafe. Escaping tags then using v-html defeats the purpose. Using v-text shows raw text, not HTML.

4. Final Answer:

   Sanitize the HTML string before binding it to v-html. -> Option D

5. Quick Check:

   Sanitize user HTML before v-html to prevent XSS [OK]

Hint: Always sanitize user HTML before using v-html [OK]

Common Mistakes:

• Using v-html directly with user input
• Escaping HTML then using v-html (no effect)
• Confusing v-text with v-html for HTML rendering