Xử lý Enter Key trong Vue.js

Tôi đang học Vue.js. Trong Vue của tôi, tôi có một trường văn bản và một nút. Theo mặc định, nút này gửi biểu mẫu khi ai đó nhấn phím Enter trên bàn phím của họ. Khi ai đó đang nhập vào trường văn bản, tôi muốn chụp từng phím được nhấn. Nếu khóa là biểu tượng '@', tôi muốn làm điều gì đó đặc biệt. Nếu phím được nhấn là phím "Enter", tôi cũng muốn làm điều gì đó đặc biệt. Sau này là một trong những thách thức cho tôi. Hiện tại, tôi có Fiddle này , bao gồm mã này:

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

Trong ví dụ của tôi, tôi dường như không thể nhấn phím "Enter" nếu không gửi biểu mẫu. Tuy nhiên, tôi mong đợi validateEmailAddresschức năng này ít nhất phải kích hoạt trước để tôi có thể chụp được nó. Nhưng, điều đó dường như không xảy ra. Tôi đang làm gì sai?

Công cụ sửa đổi sự kiện

Bạn có thể tham khảo công cụ sửa đổi sự kiện trong vuejs để ngăn việc gửi biểu mẫu trên enterkhóa.

Nó là một nhu cầu rất phổ biến để gọi event.preventDefault()hoặc event.stopPropagation()bên trong trình xử lý sự kiện.

Mặc dù chúng ta có thể thực hiện điều này dễ dàng bên trong các phương thức, nhưng sẽ tốt hơn nếu các phương thức có thể hoàn toàn là về logic dữ liệu thay vì phải xử lý các chi tiết sự kiện DOM.

Để giải quyết vấn đề này, Vue cung cấp các công cụ sửa đổi sự kiện cho v-on. Nhớ lại rằng các bổ ngữ là các hậu tố chỉ thị được biểu thị bằng dấu chấm.

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

Như tài liệu đã nêu, đây là đường cú pháp e.preventDefault()và sẽ dừng việc gửi biểu mẫu không mong muốn khi nhấn phím enter.

Đây là một fiddle đang hoạt động.

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>

Trong vue 2, Bạn có thể bắt sự kiện enter bằng cách v-on:keyup.enterkiểm tra tài liệu:

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

Tôi để lại một ví dụ rất đơn giản :

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>

Chúc may mắn

Bạn quên dấu '}' trước dòng cuối cùng (để đóng "phương thức {...").

Mã này hoạt động:

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>

Sự kiện này phù hợp với tôi:

@keyup.enter.native="onEnter".

Để xử lý sự kiện nhập, bạn có thể sử dụng

1. @keyup.enter hoặc là
2. @keyup.13

13 là mã khóa của enter. Đối với sự kiện khóa @, mã khóa là 50. Vì vậy, bạn có thể sử dụng @keyup.50.

Ví dụ:

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