Why component patterns matter in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Vue component using the Composition API.

Vue

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value [1] 1
}
</script>
<template>
  <button @click="increment">Count: {{ count }}</button>
</template>

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

A*=

B-=

C/=

D+=

Attempts:

3 left

💡 Hint

Common Mistakes

Using '-=' will decrease the count instead of increasing it.

Using '*=' or '/=' will multiply or divide the count, which is not intended.

We use += to add 1 to the current count value when the button is clicked.

2fill in blank

medium

Complete the code to bind a reactive property to the template.

Vue

<script setup>
import { ref } from 'vue'
const message = ref('Hello')
</script>
<template>
  <p>{{ [1] }}</p>
</template>

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

Amessage.value()

Bmessage.value

Cmessage

Dmessage()

Attempts:

3 left

💡 Hint

Common Mistakes

Using message.value in the template causes errors.

Trying to call message() is incorrect for refs.

In Vue templates, you use the ref variable name directly without .value.

3fill in blank

hard

Fix the error in the component setup by completing the import statement.

Vue

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

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

A{ ref }

B{ reactive }

C{ computed }

D{ watch }

Attempts:

3 left

💡 Hint

Common Mistakes

Importing reactive instead of ref causes errors here.

Using computed or watch is not correct for this purpose.

The ref function is needed to create reactive references like count.

4fill in blank

hard

Fill both blanks to create a reactive object and update its property.

Vue

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

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref for objects requires different syntax.

Importing computed or watch is not correct here.

Use reactive to create a reactive object like state.

5fill in blank

hard

Fill all three blanks to create a computed property that doubles a count.

Vue

<script setup>
import { ref, [1] } from 'vue'
const count = ref(1)
const double = [2](() => count.value [3] 2)
</script>

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

Acomputed

Breactive

C*

D+

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of computed for derived values.

Using addition + instead of multiplication *.

Use computed to create a reactive value based on count. Multiply by 2 with *.