Snippet

Intercepting v-model with defineModel

Vue 3.4 introduced a powerful way to handle v-model modifiers. By destructuring 'defineModel', you can access custom modifiers and use the 'set' transformer to intercept and modify the data before it flows back to the parent.

snippet.js

javascript

// In a Child Component
const [modelValue, modifiers] = defineModel({
  set(value) {
    if (modifiers.capitalize) {
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
    return value;
  }
});
 
// In Parent
// <MyInput v-model.capitalize="name" />

vue

Breakdown

if (modifiers.capitalize)

Checks if the '.capitalize' modifier was used on the parent call.

set(value) { ... }

A transformer function that sanitizes the outgoing value.

Previous snippet Next snippet

More Expert JavaScript exercises →

Intercepting v-model with defineModel

Related