javascript / intermediate
Snippet
Benutzerdefinierte v-model Modifikatoren implementieren
Sie können benutzerdefinierte Modifikatoren für v-model unterstützen, indem Sie den Prop modelModifiers prüfen. Dies ermöglicht es der Elternkomponente, Flags wie .uppercase zu übergeben, die die Verarbeitung der Eingabedaten ändern.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
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
Erklärung
1
modelModifiers
Ein von Vue bereitgestelltes Objekt, das boolesche Flags für jeden verwendeten Modifikator enthält.
2
if (props.modelModifiers?.uppercase)
Prüft auf einen spezifischen benutzerdefinierten Modifikator und wendet die entsprechende Logik an.