Raw HTML with v-html in Vue - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the v-html directive do in Vue?

The v-html directive tells Vue to insert raw HTML content inside an element instead of plain text. It renders the HTML tags as actual HTML.

intermediate

Why should you be careful when using v-html?

Using v-html can expose your app to security risks like Cross-Site Scripting (XSS) if you insert untrusted HTML. Always sanitize or trust the source of the HTML.

beginner

How do you bind raw HTML content to a div using v-html?

You write:
<div v-html="rawHtmlContent"></div>
where rawHtmlContent is a data property holding the HTML string.

intermediate

Can you use v-html to bind Vue components or directives inside the raw HTML?

No. v-html only renders plain HTML. Vue components or directives inside the raw HTML string will not work or be compiled.

beginner

What is a safer alternative to v-html if you want to display user input?

Instead of v-html, use text interpolation like {{ userInput }} which escapes HTML tags and shows them as text, preventing XSS.

What does v-html do in Vue?

A Runs JavaScript code

B Binds plain text only

C Renders raw HTML inside an element

D Creates a new Vue component

v-html inserts raw HTML content inside an element, rendering the HTML tags.

Which risk is associated with using v-html with untrusted content?

A Cross-Site Scripting (XSS)

B Memory leak

C Slow rendering

D CSS conflicts

Untrusted HTML can contain malicious scripts causing XSS attacks.

Can Vue components inside a string bound with v-html be rendered?

A Only if registered globally

B No, Vue does not compile inside <code>v-html</code>

C Yes, always

D Only in Vue 3

Vue does not compile or process components inside raw HTML inserted by v-html.

How do you safely display user input that might contain HTML tags?

A Use text interpolation like <code>{{ userInput }}</code>

B Use <code>v-text</code> with raw HTML

C Use <code>v-html</code> directly

D Use <code>v-bind:html</code>

Text interpolation escapes HTML tags, showing them as text and preventing XSS.

Which Vue directive is used to insert raw HTML?

A <code>v-text</code>

B <code>v-show</code>

C <code>v-bind</code>

D <code>v-html</code>

v-html inserts raw HTML content inside an element.

Explain how to use v-html in Vue and what precautions you should take.

Think about how raw HTML is inserted and security concerns.

Describe the difference between using v-html and text interpolation for displaying content in Vue.

Consider how HTML tags are treated in each case.

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