Vue में इवेंट द्वारा फॉर्म डेटा प्राप्त करना

मान लीजिए कि हमारे पास एक बटन और एक इनपुट है, जिसमें एक नंबर दर्ज किया जाता है। बटन दबाने पर इनपुट में दर्ज संख्या का वर्ग आउटपुट करते हैं। आइए कार्यान्वयन शुरू करें।

समस्या को हल करने के लिए हमें दो गुणों की आवश्यकता होगी। गुण num इनपुट में डेटा दर्ज करने के दौरान बदलता रहेगा, और गुण res में हम वर्ग का परिणाम दर्ज करेंगे:

javascriptdata() {
  return {
    num: 0,
    res: 0
  }
}

आइए अब एक इनपुट बनाएं, इसे गुण num से बांधें, एक बटन बनाएं, जिस पर क्लिक करने पर मेथड calc निष्पादित होगी, और एक पैराग्राफ भी बनाएं, जिसमें परिणाम आउटपुट होगा:

App.vue<template>
  <p>{{ res }}</p>
  <input v-model="num">
  <button v-on:click="calc">काम करें</button>
</template>

आइए मेथड calc का कार्यान्वयन लिखें:

javascriptmethods: {
  calc: function() {
    this.res = this.num ** 2;
  }
}

ऐसा होगा कि जैसे ही मेथड calc कॉल की जाएगी (और यह बटन दबाने पर होगी), गुण res में परिणाम दर्ज हो जाएगा और साथ ही साथ हमारे पैराग्राफ में आउटपुट हो जाएगा।