Vue में इवेंट हैंडलर्स जोड़ना

आइए अब हम अपनी मेथड को किसी इवेंट पर चलाएं। किसी DOM एलिमेंट पर इवेंट जोड़ने के लिए, हमें v-on डायरेक्टिव का उपयोग करना होगा।

इस डायरेक्टिव में कोलन के बाद इवेंट का नाम देना होता है, और वैल्यू के रूप में उस मेथड का नाम देना होता है, जिसे इस इवेंट के होने पर कॉल करना है।

आइए इसे प्रैक्टिस में ट्राई करते हैं। मान लीजिए कि हमारे पास निम्नलिखित मेथड है:

App.vuemethods: {
  show: function() {
    alert('!');
  }
}

मान लीजिए कि हमारे पास निम्नलिखित बटन है:

App.vue<template>
  <button>text</button>
</template>

आइए ऐसा करें कि इस बटन पर क्लिक करने पर show मेथड कॉल हो:

App.vue<template>
  <button v-on:click="show">text</button>
</template>

आमतौर पर सभी लोग v-on के शॉर्टकट का उपयोग करते हैं। यह इवेंट के नाम से पहले @ सिंबल के रूप में होता है:

App.vue<template>
  <button @click="show">text</button>
</template>