Обработка Введите ключ в 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 по крайней мере, сгорит, чтобы я мог ее захватить. Но, похоже, это не происходит. Что я делаю не так?

Ответы

Ответ 1

Модификаторы событий

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

Очень часто необходимо вызвать event.preventDefault() или event.stopPropagation() внутри обработчиков событий.

Хотя мы можем сделать это легко внутри методов, было бы лучше, если бы методы могли быть чисто логикой данных, а не иметь дело с деталями событий DOM.

Чтобы решить эту проблему, Vue предоставляет модификаторы событий для v-on. Напомним, что модификаторы являются директивными постфиксами, обозначенными точкой.

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

Как указано в документации, это синтаксический сахар для e.preventDefault() и прекратит e.preventDefault() нежелательной формы при нажатии клавиши ввода.

Вот рабочая скрипка.

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>

Ответ 2

В vue 2 вы можете поймать событие ввода с помощью 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>

Ответ 3

Вы забудете '}' перед последней строкой (чтобы закрыть "методы {...").

Этот код работает:

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>

Ответ 4

Это событие работает для меня:

@keyup.enter.native="onEnter".