javascript / intermediate
Snippet
Implementing Custom v-model Modifiers
You can support custom modifiers for v-model by checking the modelModifiers prop. This enables the parent component to pass flags like .uppercase that change how input data is processed.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
const props = defineProps(['modelValue', 'modelModifiers']);const emit = defineEmits(['update:modelValue']);function handleInput(e) {let value = e.target.value;if (props.modelModifiers?.uppercase) {value = value.toUpperCase();}emit('update:modelValue', value);}
vue
Breakdown
1
modelModifiers
An object provided by Vue containing boolean flags for every modifier used.
2
if (props.modelModifiers?.uppercase)
Checks for a specific custom modifier and applies logic accordingly.