Menangani Enter Key di Vue.js

Saya sedang mempelajari Vue.js. Di Vue saya, saya memiliki kolom teks dan tombol. Secara default, tombol ini mengirimkan formulir ketika seseorang menekan tombol Enter pada keyboard mereka. Saat seseorang mengetik di bidang teks, saya ingin menangkap setiap tombol yang ditekan. Jika kuncinya adalah simbol '@', saya ingin melakukan sesuatu yang istimewa. Jika tombol yang ditekan adalah tombol "Enter", saya ingin melakukan sesuatu yang istimewa juga. Yang terakhir inilah yang memberi saya tantangan. Saat ini, saya memiliki Fiddle ini , yang menyertakan kode ini:

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

Dalam contoh saya, saya tidak bisa menekan tombol "Enter" tanpa mengirimkan formulir. Namun, saya berharap validateEmailAddressfungsi tersebut setidaknya aktif terlebih dahulu sehingga saya bisa menangkapnya. Tapi, sepertinya itu tidak terjadi. Apa yang saya lakukan salah?

Pengubah Acara

Anda dapat merujuk ke pengubah acara di vuejs untuk mencegah pengiriman formulir pada enterkunci.

Ini adalah kebutuhan yang sangat umum untuk memanggil event.preventDefault()atau event.stopPropagation()di dalam penangan acara.

Meskipun kita dapat melakukan ini dengan mudah di dalam metode, akan lebih baik jika metode tersebut murni tentang logika data daripada harus berurusan dengan detail peristiwa DOM.

Untuk mengatasi masalah ini, Vue menyediakan pengubah acara untuk v-on. Ingat bahwa pengubah adalah postfix direktif yang dilambangkan dengan sebuah titik.

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

Seperti yang dinyatakan dalam dokumentasi, ini adalah gula sintaksis untuk e.preventDefault()dan akan menghentikan pengiriman formulir yang tidak diinginkan saat menekan tombol enter.

Ini biola yang berfungsi.

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>

Di vue 2, Anda dapat menangkap acara enter dengan v-on:keyup.entermemeriksa dokumentasi:

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

Saya meninggalkan contoh yang sangat sederhana :

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>

Semoga berhasil

Anda lupa '}' sebelum baris terakhir (untuk menutup "metode {...").

Kode ini berfungsi:

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>

Acara ini cocok untuk saya:

@keyup.enter.native="onEnter".

Untuk memasukkan penanganan acara, Anda dapat menggunakan

1. @keyup.enter atau
2. @keyup.13

13 adalah kode kunci enter. Untuk peristiwa @ key, kodenya adalah 50. Jadi, Anda dapat menggunakan @keyup.50.

Sebagai contoh:

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