การจัดการ Enter Key ใน Vue.js

ฉันกำลังเรียนรู้ Vue.js ใน Vue ของฉันฉันมีช่องข้อความและปุ่ม ตามค่าเริ่มต้นปุ่มนี้จะส่งแบบฟอร์มเมื่อมีคนกดปุ่ม Enter บนแป้นพิมพ์ เมื่อมีคนพิมพ์ในช่องข้อความฉันต้องการจับแต่ละคีย์ที่กด ถ้าคีย์เป็นสัญลักษณ์ '@' ฉันต้องการทำอะไรเป็นพิเศษ หากคีย์ที่กดเป็นปุ่ม "Enter" ฉันก็ต้องการทำสิ่งที่พิเศษเช่นกัน อย่างหลังคือสิ่งที่ท้าทายฉัน ขณะนี้ฉันมีFiddleซึ่งมีรหัสนี้:

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ฟังก์ชันจะเริ่มทำงานอย่างน้อยก่อนเพื่อที่ฉันจะได้จับมันได้ แต่ดูเหมือนจะไม่เกิดขึ้น ผมทำอะไรผิดหรือเปล่า?

ตัวปรับเปลี่ยนเหตุการณ์

คุณสามารถอ้างถึงตัวปรับแต่งเหตุการณ์ใน vuejs เพื่อป้องกันการส่งแบบฟอร์มบนenterคีย์

เป็นเรื่องปกติมากที่จะต้องโทรหาevent.preventDefault()หรือevent.stopPropagation()ภายในตัวจัดการเหตุการณ์

แม้ว่าเราจะสามารถทำวิธีนี้ได้อย่างง่ายดายภายในเมธอด แต่มันจะดีกว่าถ้าเมธอดนั้นเกี่ยวข้องกับตรรกะข้อมูลอย่างแท้จริงแทนที่จะต้องจัดการกับรายละเอียดเหตุการณ์ DOM

เพื่อแก้ไขปัญหานี้ Vue v-onให้ปรับเปลี่ยนกิจกรรมสำหรับ โปรดจำไว้ว่าตัวปรับเปลี่ยนเป็นคำสั่ง postfix ที่แสดงด้วยจุด

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

ตามที่ระบุในเอกสารนี่คือน้ำตาลสังเคราะห์สำหรับe.preventDefault()และจะหยุดการส่งแบบฟอร์มที่ไม่ต้องการเมื่อกดปุ่ม 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';
    },
    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>

ในข้อ 2 คุณสามารถจับ Enter event โดยv-on:keyup.enterตรวจสอบเอกสารประกอบ:

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

ฉันปล่อยตัวอย่างง่ายๆ :

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>

โชคดี

คุณลืมเครื่องหมาย "}" ก่อนบรรทัดสุดท้าย (เพื่อปิด "วิธีการ {... ")

รหัสนี้ใช้งานได้:

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>

งานนี้เหมาะกับฉัน:

@keyup.enter.native="onEnter".

สำหรับการป้อนการจัดการเหตุการณ์คุณสามารถใช้ได้

1. @keyup.enter หรือ
2. @keyup.13

13 คือรหัสของ Enter สำหรับ @ เหตุการณ์สำคัญ keycode คือ 50 @keyup.50ดังนั้นคุณสามารถใช้

ตัวอย่างเช่น:

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