Vue.js এ এন্টার কী পরিচালনা করা

Question 1

আমি Vue.js শিখছি আমার ভুয়ে, আমার কাছে একটি পাঠ্য ক্ষেত্র এবং একটি বোতাম রয়েছে। ডিফল্টরূপে, এই বোতামটি কোনও ফর্ম জমা দেয় যখন কেউ তাদের কীবোর্ডের এন্টার কী টিপেন। যখন কেউ পাঠ্য ক্ষেত্রে টাইপ করছেন, আমি প্রতিটি কী টিপে ধরতে চাই। কীটি যদি '@' প্রতীক হয় তবে আমি বিশেষ কিছু করতে চাই। যদি চাপানো কীটি হ'ল "প্রবেশ করুন" কী, আমি পাশাপাশি বিশেষ কিছু করতে চাই। দ্বিতীয়টি হ'ল আমাকে চ্যালেঞ্জ দেওয়া। বর্তমানে, আমার কাছে এই ফিডল রয়েছে, যার মধ্যে এই কোডটি রয়েছে:

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

আমার উদাহরণস্বরূপ, আমি ফর্মটি জমা না দিয়ে "এন্টার" কী টিপবো বলে মনে হচ্ছে না। তবুও, আমি validateEmailAddressকমপক্ষে প্রথমে ফাংশনটি আগুনের আশা করব যাতে আমি এটি ক্যাপচার করতে পারি। তবে, তা ঘটছে বলে মনে হয় না। আমি কি ভুল করছি?

Question 2

ইভেন্ট সংশোধক

কীতে ফর্ম জমা রোধ করতে আপনি ভয়েজে ইভেন্ট সংশোধক উল্লেখ করতে পারেন enter।

ইভেন্ট হ্যান্ডলারদের কল করা event.preventDefault()বা তার event.stopPropagation()ভিতরে থাকা খুব সাধারণ প্রয়োজন ।

যদিও আমরা পদ্ধতিগুলির অভ্যন্তরে এটি সহজেই করতে পারি, তবে পদ্ধতিগুলি ডিওএম ইভেন্টের বিশদ বিবরণ না করে বরং বিশদভাবে ডেটা লজিক সম্পর্কে থাকতে পারলে ভাল।

এই সমস্যার সমাধানের জন্য, ভ্যু এর জন্য ইভেন্ট সংশোধক সরবরাহ করে 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

ভ্যুই 2 তে, আপনি v-on:keyup.enterডকুমেন্টেশন চেক করে ইভেন্টটি প্রবেশ করতে পারেন :

https://vuejs.org/v2/guide/events.html#Key- মোডিফায়ার

আমি একটি খুব সাধারণ উদাহরণ ছেড়ে :

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

আপনি শেষ লাইনের আগে একটি '}' ভুলে গেছেন ("পদ্ধতিগুলি close ..." বন্ধ করতে)।

এই কোডটি কাজ করে:

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 50 তাই আপনি ব্যবহার করতে পারেন@keyup.50 ।

উদাহরণ স্বরূপ:

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