v-model for two-way binding 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]="name" />
  <p>Your name is: {{ name }}</p>
</template>

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

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

Av-if

Bv-model

Cv-bind

Dv-for

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind instead of v-model will only bind the value one way.

Using v-if or v-for here does not bind input value.

The v-model directive creates a two-way binding between the input and the variable name.

2fill in blank

medium

Complete the code to initialize the reactive variable for v-model.

Vue

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

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

Areactive

Bref

Ccomputed

Dwatch

Attempts:

3 left

💡 Hint

Common Mistakes

Using reactive instead of ref for a simple string.

Using computed or watch which are not for creating reactive variables.

Use ref to create a reactive variable that works with v-model.

3fill in blank

hard

Fix the error in the code to correctly bind the checkbox with v-model.

Vue

<template>
  <input type="checkbox" [1]="checked" />
  <p>Checked: {{ checked }}</p>
</template>

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

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

Av-model

Bv-bind

Cv-if

Dv-show

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind will not update the variable when checkbox changes.

Using v-if or v-show does not bind input state.

Checkboxes use v-model to bind their checked state to a variable.

4fill in blank

hard

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

Vue

<template>
  <select [1]="[2]">
    <option value="red">Red</option>
    <option value="green">Green</option>
    <option value="blue">Blue</option>
  </select>
  <p>Selected color: {{ color }}</p>
</template>

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

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

Av-model

Bcolor

Cvalue

Dv-bind

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-bind instead of v-model for two-way binding.

Binding to 'value' attribute instead of the variable.

The v-model directive binds the color variable to the select's value for two-way binding.

5fill in blank

hard

Fill all three blanks to create a two-way binding with a textarea and display its length.

Vue

<template>
  <textarea [1]="[2]"></textarea>
  <p>Length: {{ [3].length }}</p>
</template>

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

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

Av-model

Btext

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'value' attribute instead of v-model for binding.

Displaying length of a wrong variable.

Use v-model to bind the textarea to text. Display the length with text.length.