Javascript is required
·
1 min read
·
2009 views

Vue Tip: Create Custom v-model Modifier

Vue Tip: Create Custom v-model Modifier Image

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:

1<template>
2  <Comp v-model.no-underscore="text" />
3</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:

1<script setup>
2const props = defineProps({
3  modelValue: String,
4  modelModifiers: { default: () => ({}) },
5})
6
7const emit = defineEmits(['update:modelValue'])
8
9function emitValue(e) {
10  let value = e.target.value
11  if (props.modelModifiers['no-underscore']) {
12    // replace all underscores in a string
13    value = value.replace(/_/g, '')
14  }
15  emit('update:modelValue', value)
16}
17</script>
18
19<template>
20  <input type="text" :value="modelValue" @input="emitValue" />
21</template>

If your v-model binding includes both modifiers and argument then the generated prop name will be arg + "Modifiers":

1<template>
2  <Comp v-model:name.no-underscore="text" />
3</template>
4
5<script setup>
6const props = defineProps(['name', 'nameModifiers'])
7defineEmits(['update:name'])
8</script>

Demo for this code is available at Vue SFC Playground.

If you liked this Vue tip, follow me on Twitter to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.