javascript / expert
Snippet
Custom v-model Modifiers for Advanced Data Input
Vue allows components to accept custom v-model modifiers (e.g., v-model.uppercase). By checking the 'modelModifiers' prop, you can implement custom reactive transformations directly in the component's update logic, keeping the parent template clean.
snippet.js
1
2
3
4
5
6
const emit = defineEmits(['update:modelValue']);function emitValue(e) {let value = e.target.value;if (props.modelModifiers.uppercase) value = value.toUpperCase();emit('update:modelValue', value);}
vue
Breakdown
1
const emit = defineEmits(['update:modelValue']);
Declares the standard event used for two-way data binding.
2
if (props.modelModifiers.uppercase) value = value.toUpperCase();
Checks for the presence of a custom 'uppercase' modifier on the v-model.
3
emit('update:modelValue', value);
Emits the transformed value back to the parent component.