Custom v-model on components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Vue

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

<script setup>
const props = defineProps({
  modelValue: String
})
</script>

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

A"text"

B"value"

C"inputValue"

D"modelValue"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a prop name other than 'modelValue' without customizing v-model.

Trying to bind v-model to a non-existent prop.

The v-model directive by default binds to the modelValue prop in Vue 3 custom components.

2fill in blank

medium

Complete the code to emit the update event for the custom v-model.

Vue

<script setup>
const emit = defineEmits([[1]])
</script>

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

A"change"

B"input"

C"update:modelValue"

D"update:value"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'input' event instead of 'update:modelValue'.

Using 'update:value' when the prop is 'modelValue'.

Vue 3 custom v-model uses the event name update:modelValue to update the parent component.

3fill in blank

hard

Fix the error in emitting the update event with the new value.

Vue

<script setup>
const emit = defineEmits(["update:modelValue"])

function onInput(event) {
  emit([1], event.target.value)
}
</script>

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

A"input"

B"update:modelValue"

C"change"

D"modelValue"

Attempts:

3 left

💡 Hint

Common Mistakes

Emitting 'input' event instead of 'update:modelValue'.

Using the prop name as event name without 'update:' prefix.

The event emitted to update the v-model must be exactly update:modelValue.

4fill in blank

hard

Fill both blanks to customize v-model with a different prop and event name.

Vue

<script setup>
const props = defineProps({
  [1]: String
})
const emit = defineEmits([[2]])
</script>

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

A"checkedValue"

B"update:checkedValue"

C"modelValue"

D"update:modelValue"

Attempts:

3 left

💡 Hint

Common Mistakes

Using mismatched prop and event names.

Not prefixing event name with 'update:'.

To customize v-model, you define a different prop and matching update event name.

5fill in blank

hard

Fill all three blanks to implement a custom v-model with a checkbox input.

Vue

<template>
  <input type="checkbox" :checked=[1] @change="event => emit([2], event.target.checked)" />
</template>

<script setup>
const props = defineProps({
  [3]: Boolean
})
const emit = defineEmits(["update:isChecked"])
</script>

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

AisChecked

B"update:isChecked"

CisCheckedValue

D"update:isCheckedValue"

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for prop and event.

Not binding the checkbox checked attribute to the prop.

The prop and event names must match for the custom v-model to work. The checkbox's checked state binds to the prop.