Обработка клавиши Enter в Vue.JS
Я изучаю вю.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, что функция validateEmailAddress по крайней мере сработает первой, чтобы я мог ее захватить. Но, похоже, этого не происходит. Что я делаю не так?
Ответы - Обработка клавиши Enter в Vue.JS / Handling Enter Key in Vue.js
22.03.2017 04:12:29
Модификаторы Событий
Вы можете обратиться к модификаторам событий в vuejs, чтобы предотвратить отправку формы по enterили event.preventDefault()внутри обработчиков событий.
Хотя мы можем легко сделать это внутри методов, было бы лучше, если бы методы могли быть чисто о логике данных, а не иметь дело с деталями событий DOM.
Для решения этой проблемы Vue предоставляет модификаторы событий для event.stopPropagation(). Напомним, что модификаторы-это директивные постфиксы, обозначаемые точкой.
v-onКак говорится в документации, это синтаксический сахар для <form v-on:submit.prevent="<method>">
...
</form>
и остановит нежелательную отправку формы при нажатии клавиши enter.
Вот вам и рабочая скрипка.
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;
}22.03.2017 04:13:47
Вы забываете '}' перед последней строкой (чтобы закрыть " методы {...").
Этот код работает :
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>28.05.2018 07:38:02
В vue 2 Вы можете поймать событие enter с v-on:keyup.enter Регистрация документации:
Я оставляю очень простой пример:
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>Удачи
v-on:keyup.native.enter="onEnter"
04.01.2019 06:27:42
Это событие работает на меня:
@keyup.enter.native="onEnter".