v-model modifiers — built-in và custom modifiers?

Built-in modifiers:
- .lazy: sync sau change event thay vì input — giảm updates
- .number: auto convert sang number (tương đương parseFloat)
- .trim: auto trim whitespace

vue

<input v-model.lazy="search" />       <!-- Update khi blur/enter -->
<input v-model.number="age" type="number" />
<input v-model.trim="name" />

Custom modifiers cho component v-model:

typescript

// Child component
const props = defineProps<{
  modelValue: string
  modelModifiers?: { uppercase?: boolean; capitalize?: boolean }
}>()
const emit = defineEmits<{ 'update:modelValue': [value: string] }>()

function handleInput(e: Event) {
  let value = (e.target as HTMLInputElement).value
  if (props.modelModifiers?.uppercase) value = value.toUpperCase()
  if (props.modelModifiers?.capitalize) value = value.charAt(0).toUpperCase() + value.slice(1)
  emit('update:modelValue', value)
}

vue

<!-- Parent usage -->
<MyInput v-model.uppercase="text" />
<MyInput v-model.capitalize="text" />

<!-- Multiple v-model với modifiers -->
<MyInput v-model:title.capitalize="title" v-model:content="content" />

Xem toàn bộ Vue.js cùng filter theo level & chủ đề con.

Mở danh sách Vue.js