Setup function basics in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a setup function that returns a reactive count variable.

Vue

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

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

Acomputed

Breactive

Cref

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a primitive value.

Trying to use computed without a getter function.

The ref function creates a reactive reference to a value, which is perfect for simple reactive variables like count.

2fill in blank

medium

Complete the code to define a setup function that returns a method to increment count.

Vue

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

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

A/=

B-=

C*=

D+=

Attempts:

3 left

💡 Hint

Common Mistakes

Using -= which decreases the value.

Using * or / which multiply or divide instead of adding.

To increase the count by 1, use the += operator on count.value.

3fill in blank

hard

Fix the error in the setup function to correctly return the count variable.

Vue

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

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

A{ count }

Bcount

C[ count ]

Dcount.value

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the variable directly instead of inside an object.

Returning the value of count instead of the ref itself.

The setup function should return an object with properties to expose them to the template. Returning { count } exposes the reactive variable properly.

4fill in blank

hard

Fill both blanks to create a reactive object and expose its property in setup.

Vue

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

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using ref instead of reactive for an object.

Importing reactive but using ref in code or vice versa.

The reactive function creates a reactive object. We import and use it to make state reactive.

5fill in blank

hard

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

Vue

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

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

Acomputed

B+

C*

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using addition instead of multiplication to double.

Not importing computed from Vue.

The computed function creates a reactive computed property. To double count, multiply count.value by 2 using *.