Обробка ключа Enter у Vue.js

Я вивчаю Vue.js. У моєму Vue у мене є текстове поле та кнопка. За замовчуванням ця кнопка подає форму, коли хтось натискає клавішу Enter на своїй клавіатурі. Коли хтось набирає текст у текстовому полі, я хочу зафіксувати кожну натиснуту клавішу. Якщо ключ - символ '@', я хочу зробити щось особливе. Якщо натиснута клавіша - це клавіша «Enter», я теж хочу зробити щось особливе. Останнє викликає у мене проблеми. На даний момент у мене є ця скрипка , яка включає такий код:

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';
    }
});

У моєму прикладі я не можу натиснути клавішу "Enter", не подавши форму. Тим не менше, я би очікував, що validateEmailAddressфункція принаймні спочатку спрацює, щоб я міг її захопити. Але, схоже, цього не відбувається. Що я роблю не так?

Модифікатори подій

Ви можете звернутися до модифікаторів подій у vuejs, щоб запобігти надсиланню форми за enterключем.

Дуже поширена необхідність викликати обробники подій event.preventDefault()або event.stopPropagation()всередині них.

Незважаючи на те, що ми можемо зробити це легко всередині методів, було б краще, якщо б методи мали стосуватися виключно логіки даних, а не мати справу з деталями подій DOM.

Для вирішення цієї проблеми Vue надає модифікатори подій для v-on. Нагадаємо, що модифікатори - це директивні постфікси, позначені крапкою.

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

Як зазначено в документації, це синтаксичний цукор для e.preventDefault()і зупинить надсилання небажаної форми натисканням клавіші Enter.

Ось робоча скрипка.

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/vue@2.2.4/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>

У версії 2, Ви можете зловити подію enter, v-on:keyup.enterперевіривши документацію:

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

Я залишаю дуже простий приклад:

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>

Удачі

Ви забули '}' перед останнім рядком (щоб закрити "методи {...").

Цей код працює:

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>

Ця подія працює для мене:

@keyup.enter.native="onEnter".

Для введення обробки подій ви можете використовувати

1. @keyup.enter або
2. @keyup.13

13 - це код введення. Для події @ key ключовий код - 50. Тож ви можете використовувати @keyup.50.

Наприклад:

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