Ich lerne Vue.js. In meinem Vue habe ich ein Textfeld und eine Schaltfläche. Diese Schaltfläche sendet standardmäßig ein Formular, wenn jemand die Eingabetaste auf der Tastatur drückt. Wenn jemand das Textfeld eintippt, möchte ich jede gedrückte Taste erfassen. Wenn der Schlüssel ein @ -Zeichen ist, möchte ich etwas Besonderes machen. Wenn die Taste "Enter" gedrückt wird, möchte ich auch etwas Besonderes machen. Letzteres ist die Herausforderung für mich. Derzeit habe ich diese Fiddle , die diesen Code enthält:
%Vor% In meinem Beispiel kann ich die "Enter" -Taste nicht drücken, ohne das Formular zu senden. Allerdings würde ich erwarten, dass die validateEmailAddress -Funktion zumindest zuerst feuert, damit ich sie erfassen kann. Aber das scheint nicht zu passieren. Was mache ich falsch?
Sie können sich in Ereignismodifikatoren in vuejs anmelden, um die Formularübermittlung am Schlüssel enter zu verhindern .
%Vor%Es ist sehr häufig erforderlich,
event.preventDefault()oderevent.stopPropagation()in Event-Handlern aufzurufen.Obwohl wir dies innerhalb von Methoden leicht machen können, wäre es besser, wenn die Methoden rein auf Datenlogik basieren und nicht mit DOM-Ereignisdetails umgehen müssen.
Um dieses Problem zu beheben, bietet Vue Ereignismodifikatoren für
v-on. Denken Sie daran, dass Modifikatoren direktive Postfixes sind, die durch einen Punkt gekennzeichnet sind.
Wie die Dokumentation sagt, ist dies syntaktischer Zucker für e.preventDefault() und stoppt die unerwünschte Formularübertragung beim Drücken der Eingabetaste.
Hier ist eine funktionierende Geige.
Tags und Links javascript vue.js