Behandlung der Eingabetaste in Vue.js.

Ich lerne Vue.js. In meinem Vue habe ich ein Textfeld und eine Schaltfläche. Standardmäßig sendet diese Schaltfläche ein Formular, wenn jemand die Eingabetaste auf seiner Tastatur drückt. Wenn jemand in das Textfeld tippt, möchte ich jede gedrückte Taste erfassen. Wenn der Schlüssel ein @ -Symbol ist, möchte ich etwas Besonderes tun. Wenn die gedrückte Taste die Eingabetaste ist, möchte ich auch etwas Besonderes tun. Letzteres ist das, was mich herausfordert. Derzeit habe ich diese Geige , die diesen Code enthält:

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },

    postEmailAddress: function() {
      this.log += '\n\nPosting';
    }
});

In meinem Beispiel kann ich die Eingabetaste nicht drücken, ohne das Formular zu senden. Ich würde jedoch erwarten, dass die validateEmailAddressFunktion mindestens zuerst ausgelöst wird, damit ich sie erfassen kann. Aber das scheint nicht zu passieren. Was mache ich falsch?

Ereignismodifikatoren

Sie können auf Ereignismodifikatoren in vuejs verweisen, um das Senden von Formularen auf enterSchlüssel zu verhindern .

Es ist sehr häufig erforderlich, Event-Handler aufzurufen event.preventDefault()oder event.stopPropagation()in diese einzusteigen.

Obwohl wir dies innerhalb von Methoden leicht tun können, wäre es besser, wenn sich die Methoden ausschließlich auf Datenlogik beziehen könnten, anstatt sich mit DOM-Ereignisdetails befassen zu müssen.

Um dieses Problem zu beheben, bietet Vue Ereignismodifikatoren für v-on. Denken Sie daran, dass Modifikatoren Direktions-Postfixes sind, die durch einen Punkt gekennzeichnet sind.

<form v-on:submit.prevent="<method>">
  ...
</form>

Wie in der Dokumentation angegeben, handelt es sich um syntaktischen Zucker für e.preventDefault()die unerwünschte Formularübermittlung beim Drücken der Eingabetaste.

Hier ist eine funktionierende Geige.

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
    validateEmailAddress: function(e) {
      if (e.keyCode === 13) {
        alert('Enter was pressed');
      } else if (e.keyCode === 50) {
        alert('@ was pressed');
      }      
      this.log += e.key;
    },
    
    postEmailAddress: function() {
			this.log += '\n\nPosting';
    },
    noop () {
      // do nothing ?
    }
  }
})

html, body, #editor {
  margin: 0;
  height: 100%;
  color: #333;
}

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="myApp" style="padding:2rem; background-color:#fff;">
<form v-on:submit.prevent="noop">
  <input type="text" v-model="emailAddress" v-on:keyup="validateEmailAddress" />
  <button type="button" v-on:click="postEmailAddress" >Subscribe</button> 
  <br /><br />
  
  <textarea v-model="log" rows="4"></textarea>  
</form>
</div>

In Version 2 können Sie das Eingabeereignis abfangen, indem v-on:keyup.enterSie die Dokumentation überprüfen:

https://vuejs.org/v2/guide/events.html#Key-Modifiers

Ich hinterlasse ein sehr einfaches Beispiel:

var vm = new Vue({
  el: '#app',
  data: {msg: ''},
  methods: {
    onEnter: function() {
       this.msg = 'on enter event';
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <input v-on:keyup.enter="onEnter" />
  <h1>{{ msg }}</h1>
</div>

Viel Glück

Sie vergessen ein '}' vor der letzten Zeile (um die "Methoden {..." zu schließen).

Dieser Code funktioniert:

Vue.config.keyCodes.atsign = 50;

new Vue({
  el: '#myApp',
  data: {
    emailAddress: '',
    log: ''
  },
  methods: {
  
    onEnterClick: function() {
    	alert('Enter was pressed');
    },
    
    onAtSignClick: function() {
    	alert('@ was pressed');
    },
    
    postEmailAddress: function() {
			this.log += '\n\nPosting';
    }
  }
})

html, body, #editor {
  margin: 0;
  height: 100%;
  color: #333;
}

<script src="https://vuejs.org/js/vue.min.js"></script>

<div id="myApp" style="padding:2rem; background-color:#fff;">

  <input type="text" v-model="emailAddress" v-on:keyup.enter="onEnterClick" v-on:keyup.atsign="onAtSignClick" />
  
  <button type="button" v-on:click="postEmailAddress" >Subscribe</button> 
  <br /><br />
  
  <textarea v-model="log" rows="4"></textarea>
</div>

Diese Veranstaltung funktioniert für mich:

@keyup.enter.native="onEnter".

Für die Eingabe der Ereignisbehandlung können Sie verwenden

1. @keyup.enter oder
2. @keyup.13

13 ist der Schlüsselcode für die Eingabe. Für das @ key-Ereignis lautet der Schlüsselcode 50. Sie können ihn also verwenden @keyup.50.

Zum Beispiel:

<input @keyup.50="atPress()" />