Implementing Custom v-model Modifiers

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
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

modelModifiers

An object provided by Vue containing boolean flags for every modifier used.

if (props.modelModifiers?.uppercase)

Checks for a specific custom modifier and applies logic accordingly.

Previous snippet Next snippet

More Intermediate JavaScript exercises →

From your library

Implementing Custom v-model Modifiers

Related