Vue.js को @change पर चयनित विकल्प मिलता है

Question

सबसे पहले, मैं कहना चाहता हूं कि Vue के लिए नया im, और यह Vue का उपयोग करते हुए मेरा पहला प्रोजेक्ट है। मुझे कॉम्बोक्स है और मैं चयनित कॉम्बोक्स के आधार पर कुछ अलग करना चाहता हूं। मैं अलग vue.html और टाइपस्क्रिप्ट फ़ाइल का उपयोग करता हूं। यहाँ मेरा कोड है।

<select name="LeaveType" @change="onChange()" class="form-control">
     <option value="1">Annual Leave/ Off-Day</option>
     <option value="2">On Demand Leave</option>
</select>

और यहाँ मेरी ts फ़ाइल है

onChange(value) {
    console.log(value);
}

मेरे टाइपस्क्रिप्ट फ़ंक्शन में चयनित विकल्प मान कैसे प्राप्त करें? धन्यवाद।

Answer 1

v-modelचयनित विकल्प के मूल्य के मूल्य को बांधने के लिए उपयोग करें । यहाँ एक उदाहरण है ।

<select name="LeaveType" @change="onChange($event)" class="form-control" v-model="key">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
<script>
var vm = new Vue({
    data: {
        key: ""
    },
    methods: {
        onChange(event) {
            console.log(event.target.value)
        }
    }
}
</script>

अधिक संदर्भ यहाँ से देखा जा सकता है ।

Comments

यह त्रुटि हो रही है "कुंजी परिभाषित नहीं है"। क्या मुझे पहले v- मॉडल को परिभाषित करना है? यदि हाँ, तो कैसे?

— hphp

हां, आप कुंजी को बदलने के लिए कोई भी नाम सेट कर सकते हैं। लेकिन सुनिश्चित करें कि यह डेटा की संपत्ति है।

— रमविन

मैं अभी भी नहीं मिला .. मुझे पता है कि मैं इसे किसी भी नाम पर नाम बदल सकता हूं, लेकिन मुझे चेतावनी मिल रही है "[व्यू चेतावनी]: संपत्ति या विधि" चयनित "उदाहरण पर परिभाषित नहीं है, लेकिन रेंडर के दौरान संदर्भित है। सुनिश्चित करें कि यह संपत्ति प्रतिक्रियाशील है, या तो डेटा विकल्प में, या वर्ग-आधारित घटकों के लिए, संपत्ति को प्रारंभिक करके "

— hphp

हो सकता है कि आपकी स्क्रिप्ट में कोई टाइपो हो क्योंकि स्क्रिप्ट में 'चयनित' शब्द का कोई अस्तित्व नहीं है। कृपया इसे जांचें और उत्तर में लिंक देखें। मैं इसमें एक डेमो उदाहरण जोड़ता हूं।

— ramwin

"चयनित" मेरा मॉडल नाम है। अगर मैं आपके कोड को फिर से

— लिखता

Answer 2

@ v- ऑन के लिए एक शॉर्टकट विकल्प है । जब आप कुछ Vue विधियों को निष्पादित करना चाहते हैं तो केवल @ का उपयोग करें । जैसा कि आप Vue विधियों को निष्पादित नहीं कर रहे हैं, इसके बजाय आप जावास्क्रिप्ट फ़ंक्शन को कॉल कर रहे हैं, आपको जावास्क्रिप्ट फ़ंक्शन को कॉल करने के लिए onchange विशेषता का उपयोग करने की आवश्यकता है

<select name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

function onChange(value) {
  console.log(value);
}

यदि आप Vue विधियों को कॉल करना चाहते हैं, तो इसे इस तरह करें-

<select name="LeaveType" @change="onChange($event)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

new Vue({
  ...
  ...
  methods:{
    onChange:function(event){
       console.log(event.target.value);
    }
  }
})

आप मान को बांधने के लिए चुनिंदा तत्व पर वी-मॉडल डेटा विशेषता का उपयोग कर सकते हैं ।

<select v-model="selectedValue" name="LeaveType" onchange="onChange(this.value)" class="form-control">
 <option value="1">Annual Leave/ Off-Day</option>
 <option value="2">On Demand Leave</option>
</select>

new Vue({
    data:{
        selectedValue : 1, // First option will be selected by default
    },
    ...
    ...
    methods:{
        onChange:function(event){
            console.log(this.selectedValue);
        }
    }
})

उम्मीद है की यह मदद करेगा :-)

Comments

मैं निम्नलिखित त्रुटि प्राप्त करता हूं जब मैं vuejs में दूसरे एक को निष्पादित करता हूं: अनकैप्ड टाइपर्रर: अपरिभाषित की संपत्ति को 'लागू' नहीं पढ़ सकता है

— TheDevWay

मैंने कोड में कहीं भी "लागू" नहीं किया है। क्या आप कृपया वह कोड साझा कर सकते हैं जिसमें आपको त्रुटि हो रही है?

— संतानू बेरा

Answer 3

परिवर्तित मूल्य में होगा event.target.value

const app = new Vue({
  el: "#app",
  data: function() {
    return {
      message: "Vue"
    }
  },
  methods: {
    onChange(event) {
      console.log(event.target.value);
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <select name="LeaveType" @change="onChange" class="form-control">
   <option value="1">Annual Leave/ Off-Day</option>
   <option value="2">On Demand Leave</option>
</select>
</div>

Answer 4

बचाव के लिए आप वी-मॉडल का भी उपयोग कर सकते हैं

<template>
    <select name="LeaveType" v-model="leaveType" @change="onChange()" class="form-control">
         <option value="1">Annual Leave/ Off-Day</option>
         <option value="2">On Demand Leave</option>
    </select>
</template>

<script>
export default {
    data() {
        return {
            leaveType: '',
        }
    },

    methods: {
        onChange() {
            console.log('The new value is: ', this.leaveType)
        }
    }
}
</script>

Comments

मैं चयनित विकल्प पर इनपुट टेक्स्ट को कैसे जोड़ सकता हूं?

— एंजेल

Answer 5

आप अपने @ परिवर्तन = "onChange ()" एक उपयोग पर नजर रखने वालों को बचा सकते हैं । Vue गणना करता है और देखता है, यह उसी के लिए डिज़ाइन किया गया है। मामले में आपको केवल मूल्य की आवश्यकता होती है न कि अन्य जटिल ईवेंट की।

कुछ इस तरह:

  ...
  watch: {
    leaveType () {
      this.whateverMethod(this.leaveType)
    }
  },
  methods: {
     onChange() {
         console.log('The new value is: ', this.leaveType)
     }
  }

Comments

कृपया ध्यान दें कि वॉचर्स महंगे हैं। ऊपर भी एक गणना की गई संपत्ति के रूप में प्राप्त किया जा सकता है, जो कहीं अधिक सस्ता है।

— रमेश पारीक