Vorbeugen Sie vor, dass das Formular gesendet wird, wenn Sie bei einer Texteingabe die Eingabetaste drücken. Verwenden Sie dazu Vue.js

Ich verwende Vue.js in meiner App und habe eine Texteingabe in einem Formular

<div id="myVueForm">
<form>
   <input type="text"  v-on="keyup:addCategory | key 'enter'">

   <!-- more form fields -->
   <button type="submit">Submit Form</button>
</form>
</div>

n meiner Vue-Instanz habe ich die folgenden

new Vue({
    el: '#myVueForm',

    methods: {
        addCategory: function(e)
        {
           if(e) e.preventDefault();
           console.log("Added a new category, thanks!");
        }
    }
});

Trotz derpreventDefault(); call, wenn ein Benutzer bei der Texteingabe die Eingabetaste drückt, wird das Formular weiterhin gesendet (obwohl dasaddCategory() Methode feuert). Dieses Verhalten kann in @ demonstriert werdediese Geige.

Ich weiß, dass ich jQuery verwenden kann, um das Ereignis abzufangen und das Senden zu verhindern, aber ich würde gerne sehen, ob es in Vue möglich ist, dies zu tun, da es eine recht häufige Verwendung zu sein scheint.

Antworten auf die Frage(14)

Ihre Antwort auf die Frage