javascript / expert
Snippet
Benutzerdefinierte v-model-Modifier für fortgeschrittene Dateneingabe
Vue ermöglicht es Komponenten, benutzerdefinierte v-model-Modifier zu akzeptieren. Durch Überprüfen der 'modelModifiers'-Prop können Sie reaktive Transformationen direkt in der Update-Logik der Komponente implementieren.
snippet.js
1
2
3
4
5
6
const emit = defineEmits(['update:modelValue']);function emitValue(e) {let value = e.target.value;if (props.modelModifiers.uppercase) value = value.toUpperCase();emit('update:modelValue', value);}
vue
Erklärung
1
const emit = defineEmits(['update:modelValue']);
Deklariert das Standard-Event für die bidirektionale Datenbindung.
2
if (props.modelModifiers.uppercase) value = value.toUpperCase();
Prüft auf das Vorhandensein eines benutzerdefinierten 'uppercase'-Modifiers im v-model.
3
emit('update:modelValue', value);
Sendet den transformierten Wert an die Elternkomponente zurück.