Vue.js फॉर्म और इनपुट बाइंडिंग

फॉर्म वेब एप्लिकेशन का एक महत्वपूर्ण हिस्सा हैं, जो उपयोगकर्ताओं को डेटा इनपुट और सबमिट करने की अनुमति देते हैं। Vue.js उपयोगकर्ता इनपुट को प्रबंधित करने और इसे आपके एप्लिकेशन डेटा के साथ सिंक करने का एक सहज तरीका प्रदान करके फॉर्म और इनपुट बाइंडिंग को संभालना आसान बनाता है। यह लेख आपको Vue.js में फॉर्म और इनपुट बाइंडिंग के साथ काम करने की मूल बातें बताएगा।

इनपुट बाइंडिंग की मूल बातें

Vue.js में, फॉर्म इनपुट के लिए दो-तरफ़ा डेटा बाइंडिंग v-model निर्देश का उपयोग करके प्राप्त की जाती है। यह निर्देश इनपुट तत्व के मान को डेटा प्रॉपर्टी से बांधता है, यह सुनिश्चित करता है कि इनपुट में कोई भी परिवर्तन डेटा में दिखाई दे और इसके विपरीत।

<template>
  <div>
    <input v-model="message" placeholder="Type something"/>
    <p>Message: {{ message }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  }
};
</script>

इस उदाहरण में, v-model निर्देश इनपुट फ़ील्ड के मान को message डेटा प्रॉपर्टी से जोड़ता है। इनपुट फ़ील्ड में दर्ज किया गया कोई भी टेक्स्ट तुरंत message प्रॉपर्टी में दिखाई देता है और पैराग्राफ़ में प्रदर्शित होता है।

विभिन्न इनपुट प्रकारों के साथ कार्य करना

v-model निर्देश विभिन्न इनपुट प्रकारों के साथ काम करता है, जिसमें टेक्स्ट फ़ील्ड, चेकबॉक्स, रेडियो बटन और चयन ड्रॉपडाउन शामिल हैं। यहाँ विभिन्न इनपुट प्रकारों के साथ v-model का उपयोग करने का तरीका बताया गया है:

• टेक्स्ट इनपुट:<input type="text" v-model="text" />
• चेकबॉक्स:<input type="checkbox" v-model="checked" />
• रेडियो बटन:<input type="radio" v-model="selected" value="option1" />
• ड्रॉपडाउन चुनें: <select v-model="selected"> <option value="option1">Option 1</option> </select>

फॉर्म सबमिशन को संभालना

फ़ॉर्म सबमिशन को संभालने के लिए, आप <form> एलिमेंट पर @submit इवेंट श्रोता का उपयोग कर सकते हैं। Vue.js में फ़ॉर्म सबमिशन को संभालने का एक सरल उदाहरण यहाँ दिया गया है:

<template>
  <form @submit.prevent="submitForm">
    <input v-model="username" placeholder="Enter your username"/>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      username: ''
    };
  },
  methods: {
    submitForm() {
      alert('Form submitted with username: ' + this.username);
    }
  }
};
</script>

इस उदाहरण में, @submit.prevent निर्देश फ़ॉर्म के सबमिट इवेंट को सुनता है और डिफ़ॉल्ट क्रिया को रोकता है। submitForm विधि को कॉल किया जाता है, जो सबमिट किए गए उपयोगकर्ता नाम के साथ एक अलर्ट प्रदर्शित करता है।

फॉर्म सत्यापन का उपयोग करना

फॉर्म इनपुट को मान्य करना फॉर्म को संभालने का एक अनिवार्य हिस्सा है। जबकि Vue.js बिल्ट-इन वैलिडेशन प्रदान नहीं करता है, आप वैलिडेशन को संभालने के लिए कस्टम विधियों या VeeValidate जैसी थर्ड-पार्टी लाइब्रेरी का उपयोग कर सकते हैं। यहाँ एक बुनियादी उदाहरण दिया गया है कि आप एक सरल वैलिडेशन विधि को कैसे लागू कर सकते हैं:

<template>
  <form @submit.prevent="validateForm">
    <input v-model="email" placeholder="Enter your email"/>
    <span v-if="!isEmailValid">Invalid email address</span>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      email: '',
      isEmailValid: true
    };
  },
  methods: {
    validateForm() {
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      this.isEmailValid = emailPattern.test(this.email);
      if (this.isEmailValid) {
        alert('Form submitted with email: ' + this.email);
      }
    }
  }
};
</script>

इस उदाहरण में, validateForm विधि जाँचती है कि ईमेल पता किसी रेगुलर एक्सप्रेशन पैटर्न से मेल खाता है या नहीं। यदि ईमेल मान्य है, तो यह फ़ॉर्म सबमिट करता है; अन्यथा, यह एक त्रुटि संदेश दिखाता है।

निष्कर्ष

इंटरैक्टिव और डेटा-संचालित वेब एप्लिकेशन बनाने के लिए Vue.js फ़ॉर्म और इनपुट बाइंडिंग को समझना महत्वपूर्ण है। v-model निर्देश का लाभ उठाकर और फ़ॉर्म सबमिशन को संभालकर, आप उपयोगकर्ता इनपुट को कुशलतापूर्वक प्रबंधित कर सकते हैं और गतिशील फ़ॉर्म बना सकते हैं। इन तकनीकों के साथ, आप अपने Vue.js एप्लिकेशन में फ़ॉर्म से संबंधित विभिन्न कार्यों को संभालने के लिए अच्छी तरह से सुसज्जित हैं।