Sanitizing user input in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind user input to a reactive variable in Vue.

Vue

<template>
  <input v-model="userInput" placeholder="Enter text" />
  <p>User input: {{ userInput }}</p>
</template>

<script setup>
import { ref } from 'vue'
const userInput = [1]('')
</script>

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

Acomputed

Bref

Creactive

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'reactive' instead of 'ref' for primitive values.

Trying to bind directly without a reactive variable.

In Vue 3, ref creates a reactive variable that can be bound to inputs with v-model.

2fill in blank

medium

Complete the code to sanitize user input by trimming whitespace before saving.

Vue

<script setup>
import { ref } from 'vue'
const userInput = ref('')

function updateInput(value) {
  userInput.value = value.[1]()
}
</script>

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

Atrim

BtoLowerCase

Creplace

Dslice

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'toLowerCase' which changes case but not spaces.

Using 'replace' without a regex to remove spaces.

The trim() method removes whitespace from both ends of a string, helping sanitize input.

3fill in blank

hard

Fix the error in the code that tries to sanitize input by escaping HTML tags.

Vue

<script setup>
import { ref } from 'vue'
const userInput = ref('')

function sanitizeInput(value) {
  return value.replace(/[1]/g, '&lt;')
}
</script>

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

A"

B&

C>

D<

Attempts:

3 left

💡 Hint

Common Mistakes

Using '&' which is part of the escape but not the character to replace.

Using '>' which is the closing bracket, not the opening.

The regex should match the less-than sign < to escape HTML tags properly.

4fill in blank

hard

Fill both blanks to create a computed property that returns sanitized user input.

Vue

<script setup>
import { ref, computed } from 'vue'
const rawInput = ref('')

const sanitizedInput = computed(() => rawInput.value.[1]().replace(/[2]/g, '&lt;'))
</script>

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

Atrim

B<

C>

DtoUpperCase

Attempts:

3 left

💡 Hint

Common Mistakes

Replacing the wrong character in the regex.

Using a method that changes case instead of trimming.

First, trim whitespace, then replace the less-than sign to escape HTML tags.

5fill in blank

hard

Fill all three blanks to create a method that sanitizes input by trimming, escaping < and >, and converting to lowercase.

Vue

<script setup>
import { ref } from 'vue'
const userInput = ref('')

function sanitize(value) {
  return value.[1]().replace(/[2]/g, '&lt;').replace(/[3]/g, '&gt;').toLowerCase()
}
</script>

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

Atrim

B<

C>

Dslice

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to replace both < and > characters.

Using 'slice' which does not sanitize input.

Trim removes spaces, then replace < and > to escape HTML tags, finally convert to lowercase for uniformity.