Snippet

v-model Abfangen mit defineModel

Vue 3.4 hat eine leistungsstarke Methode zur Handhabung von v-model-Modifiern eingeführt. Durch Destrukturierung von 'defineModel' können Sie auf benutzerdefinierte Modifier zugreifen und den 'set'-Transformer verwenden, um die Daten abzufangen und zu modifizieren, bevor sie zum Parent zurückfließen.

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

Erklärung

if (modifiers.capitalize)

Prüft, ob der '.capitalize'-Modifier beim Parent-Aufruf verwendet wurde.

set(value) { ... }

Eine Transformer-Funktion, die den ausgehenden Wert bereinigt.

Vorheriges Snippet Nächstes Snippet

Mehr JavaScript-Übungen für Experten →

v-model Abfangen mit defineModel

Verwandt