v-model with text inputs in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to bind the input value using v-model.

Vue

<template>
  <input type="text" [1] />
</template>

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

Av-model="name"

B:value="name"

Cv-bind:value="name"

Dv-on:input="name = $event.target.value"

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind:value only binds the value but does not update the variable.

Using v-on:input requires manual event handling.

The v-model directive binds the input's value and updates the variable automatically.

2fill in blank

medium

Complete the code to declare the reactive variable for the input.

Vue

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

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

Awatch

Breactive

Ccomputed

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive is for objects, not simple strings.

Computed is for derived values, not initial reactive state.

The ref function creates a reactive variable for simple values like strings.

3fill in blank

hard

Fix the error in the input binding to correctly update the variable.

Vue

<template>
  <input type="text" v-model=[1] />
</template>

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

A"name"

Bref('name')

Cname

Dname.value

Attempts:

3 left

💡 Hint

Common Mistakes

Adding quotes makes it a string literal, not a variable.

Using .value is only for script, not template.

In Vue templates, use the variable name directly without quotes or .value when using v-model.

4fill in blank

hard

Fill both blanks to create a two-way binding with a placeholder.

Vue

<template>
  <input type="text" [1] [2] />
</template>

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

Av-model="username"

Bv-bind:placeholder="username"

Cplaceholder="Enter name"

Dv-bind:placeholder="'Enter name'"

Attempts:

3 left

💡 Hint

Common Mistakes

Using placeholder without quotes inside v-bind causes errors.

Not using v-model means input won't update the variable.

Use v-model to bind the input value and v-bind:placeholder with a string to set the placeholder dynamically.

5fill in blank

hard

Fill all three blanks to create a reactive input with initial value and display it.

Vue

<template>
  <input type="text" [1] />
  <p>Your name is: [2]</p>
</template>

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

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

Av-model="name"

Bname

Dusername

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names causes errors.

Not initializing the ref causes empty input.

Bind the input with v-model="name", display the variable name, and declare name as a ref with initial value.