javascript — обработка ключа ввода в Vue.js

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

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

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

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

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

Как указано в документации, это синтаксический сахар для 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  = 'nnPosting'; }, noop () { // do nothing ? } } }) 
 html, body, #editor { margin: 0; height: 100%; color: #333; } 
 {amp}lt;script src="https://unpkg.com/vue@2.2.4/dist/vue.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;div id="myApp" style="padding:2rem; background-color:#fff;"{amp}gt; {amp}lt;form v-on:submit.prevent="noop"{amp}gt; {amp}lt;input type="text" v-model="emailAddress" v-on:keyup="validateEmailAddress" /{amp}gt; {amp}lt;button type="button" v-on:click="postEmailAddress" {amp}gt;Subscribe{amp}lt;/button{amp}gt; {amp}lt;br /{amp}gt;{amp}lt;br /{amp}gt; {amp}lt;textarea v-model="log" rows="4"{amp}gt;{amp}lt;/textarea{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;/div{amp}gt; 

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector