Options API Deep-dive — Series 3

Preview — 3 of 10 questions

What does v-model.trim.number do to whatever the user types?

javascript

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

<template>
  <input v-model.trim.number="age" />
</template>

AIt strips leading/trailing whitespace, then converts the trimmed string to a number before assigning it to age

B.trim and .number cannot be combined — only one modifier is allowed per v-model

CIt converts to a number first, then trims — so " 5 " fails to parse and age becomes NaN

DBoth modifiers are ignored on <input>; they only work on <textarea>

What does this do?

javascript

<script setup>
const handlers = {
  click: () => console.log('clicked'),
  mouseenter: () => console.log('hovered'),
}
</script>

<template>
  <button v-on="handlers">Hover or click me</button>
</template>

AIt attaches a single custom event named handlers

BIt's invalid — v-on always requires an explicit event name argument, unlike v-bind

CIt attaches every key of handlers as an event listener — click and mouseenter here — the same as writing @click="..." @mouseenter="..." separately

DOnly the first property in the object (click) is registered as a listener

Why does changing :key here reset UserForm's internal state when userId changes, even though the component type never changes?

javascript

<template>
  <UserForm :key="userId" :user-id="userId" />
</template>

A:key on a component has no special effect — only :key inside v-for does anything

BIt doesn't reset anything; :key is purely cosmetic on non-v-for elements

CIt resets only the DOM, not the component's JavaScript state — internal refs keep their old values

DChanging key tells Vue this is now a logically different node — instead of patching the existing UserForm instance in place, Vue destroys the old instance and mounts a brand-new one, wiping all of its internal ref/reactive state

Answer all 10 questions (7 more), see explanations for every answer, and track your score.