Why form binding matters in Vue - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the input value to the Vue ref.

Vue

<template>
  <input type="text" v-model="[1]" />
  <p>You typed: {{ message }}</p>
</template>

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

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

Avalue

B"message"

Cref

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the variable name in v-model.

Binding to 'value' instead of the ref variable.

The v-model directive binds the input's value to the Vue ref variable message. This keeps the input and data in sync.

2fill in blank

medium

Complete the code to update the message when the input changes.

Vue

<template>
  <input type="text" v-model="[1]" />
  <p>Length: {{ message.length }}</p>
</template>

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

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

Amessage

B"message"

Ctext

Dinput

Attempts:

3 left

💡 Hint

Common Mistakes

Binding to a string literal instead of the variable.

Using a non-existent variable name.

Binding v-model to message updates the ref automatically as the user types.

3fill in blank

hard

Fix the error in the code to properly bind the input value.

Vue

<template>
  <input type="text" v-model="[1]" />
  <p>Message: {{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'
const message = ref('Hello')
</script>

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

Amessage

Bmessage.value

C"message"

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using message.value in the template causes errors.

Putting quotes around the variable name.

Use message directly in v-model. Vue handles the ref's value internally.

4fill in blank

hard

Fill both blanks to create a reactive form with two inputs bound to different refs.

Vue

<template>
  <input type="text" v-model="[1]" placeholder="First name" />
  <input type="text" v-model="[2]" placeholder="Last name" />
  <p>Full name: {{ firstName }} {{ lastName }}</p>
</template>

<script setup>
import { ref } from 'vue'
const firstName = ref('')
const lastName = ref('')
</script>

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

AfirstName

Blast

ClastName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect or partial variable names.

Mixing up the bindings between inputs.

Bind the first input to firstName and the second to lastName to keep them reactive and in sync with the data.

5fill in blank

hard

Fill all three blanks to create a reactive form with a computed full name.

Vue

<template>
  <input type="text" v-model="[1]" placeholder="First name" />
  <input type="text" v-model="[2]" placeholder="Last name" />
  <p>Full name: {{ [3] }}</p>
</template>

<script setup>
import { ref, computed } from 'vue'
const firstName = ref('')
const lastName = ref('')
const fullName = computed(() => `${firstName.value} ${lastName.value}`)
</script>

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

AfirstName

BlastName

CfullName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect variable names in bindings or display.

Trying to bind computed property to inputs.

Bind inputs to firstName and lastName. Display the computed fullName which updates automatically.