Raw HTML with v-html in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue component render?

Consider this Vue 3 component using v-html. What will be the visible output in the browser?

Vue

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

<script setup>
import { ref } from 'vue'
const rawHtml = ref('<p><strong>Hello</strong> <em>World</em>!</p>')
</script>

A The text 'Hello World!' with 'Hello' bold and 'World' italicized.

B The raw string '<p><strong>Hello</strong> <em>World</em>!</p>' displayed as plain text.

C A syntax error preventing the component from rendering.

D An empty div with no visible content.

💡 Hint

Remember that v-html renders the string as HTML, not plain text.

The v-html directive tells Vue to insert the string as raw HTML inside the element. So the tags like <strong> and <em> are interpreted by the browser, showing bold and italic text respectively.

📝 Syntax

intermediate

Which option correctly binds raw HTML using v-html?

You want to display raw HTML stored in a Vue ref called content. Which of these is the correct syntax?

A <div v-html='{{ content }}'></div>

B <div v-html="content"></div>

C <div :v-html="content"></div>

D <div v-html="{ content }"></div>

💡 Hint

v-html is a directive and expects a JavaScript expression without mustache syntax.

The correct way to bind raw HTML is v-html="content". Using mustache syntax inside v-html or prefixing with a colon is incorrect.

🔧 Debug

advanced

Why does this v-html binding not update when the data changes?

Given this Vue 3 component, why does the displayed HTML not update when rawHtml changes?

Vue

<template>
  <div v-html="rawHtml"></div>
  <button @click="changeHtml">Change HTML</button>
</template>

<script setup>
import { ref } from 'vue'
const rawHtml = ref('<p>Original</p>')

function changeHtml() {
  rawHtml = '<p>Updated</p>'
}
</script>

A Because the function assigns a new string to the ref variable instead of updating its value property.

B Because v-html does not react to changes in ref variables.

C Because the button click event is not properly bound.

D Because rawHtml is not declared as a reactive variable.

💡 Hint

Remember how to update the value inside a ref in Vue 3.

In Vue 3, refs are objects with a .value property. To update the reactive value, you must assign to rawHtml.value, not replace the ref variable itself.

🧠 Conceptual

advanced

What is a major security risk when using v-html with user input?

Why should you be cautious about using v-html to render HTML content that comes from users?

A It will cause Vue to crash if the HTML is too long.

B It disables all CSS styles on the page.

C It automatically sanitizes the HTML, so there is no risk.

D It can lead to Cross-Site Scripting (XSS) attacks if malicious scripts are injected.

💡 Hint

Think about what happens if someone inserts a