Vue.js में कुंजी दर्ज करना

Question 1

मैं Vue.js. सीख रहा हूँ मेरे Vue में, मेरे पास एक टेक्स्ट फ़ील्ड और एक बटन है। डिफ़ॉल्ट रूप से, यह बटन एक फॉर्म सबमिट करता है जब कोई व्यक्ति अपने कीबोर्ड पर 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फ़ंक्शन कम से कम पहले आग लग जाए ताकि मैं इसे पकड़ सकूं। लेकिन, ऐसा होता नहीं दिख रहा है। मैं क्या गलत कर रहा हूं?

Question 2

इवेंट संशोधक

आप vuejs में ईवेंट मॉडिफ़ायर को संदर्भित कर सकते हैं ताकि enterकुंजी पर फ़ॉर्म सबमिट करने से रोका जा सके ।

इवेंट हैंडलर को कॉल करना event.preventDefault()या event.stopPropagation()अंदर जाना बहुत ही आम बात है ।

यद्यपि हम इसे आसानी से अंदर के तरीकों से कर सकते हैं, लेकिन यह बेहतर होगा कि डोम की घटना के विवरणों से निपटने के बजाय विधियां विशुद्ध रूप से डेटा लॉजिक के बारे में हो सकती हैं।

इस समस्या को हल करने के लिए, Vue के लिए इवेंट संशोधक प्रदान करता है v-on। याद रखें कि संशोधक एक पोस्ट द्वारा निरूपित प्रत्यक्ष उपसर्ग हैं।

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

जैसा कि दस्तावेज़ीकरण कहता है, यह के लिए सिंथेटिक चीनी है 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 += '\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>

स्निपेट का विस्तार करें

Question 3

Vue 2 में, आप 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>

स्निपेट का विस्तार करें

सौभाग्य

Question 4

आप अंतिम पंक्ति ("तरीकों {..." को बंद करने से पहले) '}' को भूल जाते हैं।

यह कोड काम करता है:

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>

स्निपेट का विस्तार करें

Question 5

यह घटना मेरे लिए काम करती है:

@keyup.enter.native="onEnter".

Question 6

एंटर इवेंट हैंडलिंग के लिए आप उपयोग कर सकते हैं

@keyup.enter या
@keyup.13

13 दर्ज का कीकोड है। @ कुंजी ईवेंट के लिए, कीकोड 50 है। इसलिए आप उपयोग कर सकते हैं @keyup.50।

उदाहरण के लिए:

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