Script setup syntax in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to declare a reactive variable using the script setup syntax.

Vue

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

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

Aref

Breactive

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a primitive value.

Forgetting to import ref from 'vue'.

In Vue's script setup syntax, ref is used to declare a reactive variable holding a simple value.

2fill in blank

medium

Complete the code to define a function inside the script setup block.

Vue

<script setup>
function [1]() {
  console.log('Hello from setup')
}
</script>

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

AuseEffect

BsayHello

Cmounted

Ddata

Attempts:

3 left

💡 Hint

Common Mistakes

Using lifecycle hook names as function names.

Using React-specific names like useEffect.

Functions inside script setup are declared normally. Here, sayHello is a valid function name.

3fill in blank

hard

Fix the error in the script setup syntax to correctly import and use a reactive object.

Vue

<script setup>
import { [1] } from 'vue'
const state = [1]({ count: 0 })
</script>

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref for an object instead of reactive.

Importing ref but trying to use reactive.

The reactive function creates a reactive object. It must be imported and used consistently.

4fill in blank

hard

Fill both blanks to correctly define a computed property inside script setup.

Vue

<script setup>
import { computed } from 'vue'
const doubleCount = computed(() => state.[1] * [2])
</script>

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

Acount

B2

C3

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names.

Multiplying by 3 instead of 2.

The computed property multiplies the reactive count by 2 to get doubleCount.

5fill in blank

hard

Fill all three blanks to correctly emit an event from a component using script setup syntax.

Vue

<script setup>
const emit = defineEmits(['[1]'])
function sendMessage() {
  emit('[2]', [3])
}
</script>

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

Aupdate

C'Hello World!'

D'Goodbye!'

Attempts:

3 left

💡 Hint

Common Mistakes

Mismatching event names between defineEmits and emit.

Passing a variable instead of a string literal.

The event named 'update' is declared and emitted with the message 'Hello World!'.