Vue.js'de Enter Anahtarını Kullanma

Vue.js öğreniyorum. Vue'mde bir metin alanım ve bir düğmem var. Varsayılan olarak, bu düğme, birisi klavyesindeki Enter tuşuna bastığında bir form gönderir. Birisi metin alanına yazı yazarken, basılan her tuşu yakalamak istiyorum. Anahtar bir '@' sembolüyse, özel bir şey yapmak istiyorum. Basılan tuş "Enter" tuşu ise, ben de özel bir şey yapmak istiyorum. İkincisi, bana zorluk çıkaran. Şu anda, bu kodu içeren bu Fiddle'a sahibim :

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

Örneğimde, formu göndermeden "Enter" tuşuna basamıyorum. Yine de, onu validateEmailAddressyakalayabilmek için işlevin en azından önce ateşlenmesini bekliyorum . Ama bu olmuyor gibi görünüyor. Neyi yanlış yapıyorum?

Olay Değiştiriciler

Anahtarda form gönderimini önlemek için vuejs'deki olay değiştiricilere başvurabilirsiniz enter.

Olay işleyicileri çağırmak event.preventDefault()veya event.stopPropagation()içinde bulunmak çok yaygın bir ihtiyaçtır .

Bunu yöntemlerin içinde kolayca yapabilsek de, yöntemlerin DOM olay ayrıntılarıyla uğraşmak yerine yalnızca veri mantığıyla ilgili olması daha iyi olur.

Bu sorunu çözmek için Vue v-on,. Değiştiricilerin bir nokta ile gösterilen yönerge son ekleri olduğunu hatırlayın.

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

Belgelerin belirttiği gibi, bu sözdizimsel şekerdir e.preventDefault()ve istenmeyen form gönderimini enter tuşuna basıldığında durduracaktır.

İşte çalışan bir keman.

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>

Vue 2'de, v-on:keyup.enterbelgeleri kontrol ederek enter olayını yakalayabilirsiniz :

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

Çok basit bir örnek bırakıyorum :

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>

İyi şanslar

Son satırdan önce bir '}' unutursunuz ("yöntemleri {..." kapatmak için).

Bu kod çalışır:

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>

Bu olay benim için çalışıyor:

@keyup.enter.native="onEnter".

Olay işleme girmek için kullanabilirsiniz

1. @keyup.enter veya
2. @keyup.13

13, girişin anahtar kodudur. @ Key olayı için, anahtar kodu 50'dir. Yani kullanabilirsiniz @keyup.50.

Örneğin:

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