v-model has some built-in modifiers like .lazy, .number and .trim. But sometimes, you might need to add your custom modifier.
In this simple demo, I want to create a custom modifier called no-underscore that removes all underscores _ from an input:
<template>
<Comp v-model.no-underscore="text" />
</template>
Inside our component we can access the modifier via the modelModifiers prop. We manipulate the value if an input event is fired and the modifier is available:
<script setup>
const props = defineProps({
modelValue: String,
modelModifiers: { default: () => ({}) },
})
const emit = defineEmits(['update:modelValue'])
function emitValue(e) {
let value = e.target.value
if (props.modelModifiers['no-underscore']) {
// replace all underscores in a string
value = value.replace(/_/g, '')
}
emit('update:modelValue', value)
}
</script>
<template>
<input type="text" :value="modelValue" @input="emitValue" />
</template>
If your v-model binding includes both modifiers and argument then the generated prop name will be arg + "Modifiers":
<template>
<Comp v-model:name.no-underscore="text" />
</template>
<script setup>
const props = defineProps(['name', 'nameModifiers'])
defineEmits(['update:name'])
</script>
Demo for this code is available at Vue SFC Playground.
If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more.
Vue Tip: Use Lazy v-model to Sync State After Change Events
Vue Tip: Query Inner Elements in Third-Party Components
