वी-मॉडल में परिवर्तन होने पर किसी ईवेंट को कैसे फ़ायर करें? (vue js)

Question

मैं foo() फ़ंक्शन को @click के साथ आग लगाने की कोशिश कर रहा हूं लेकिन जैसा कि आप देख सकते हैं, ईवेंट को सही ढंग से आग लगाने के लिए रेडियो बटन को दो बार दबाएं। केवल दूसरी बार जब आप दबाते हैं तो मूल्य को पकड़ें ...

मैं @click के बिना ईवेंट को आग लगाना चाहता हूं, केवल v-model (SRStatus) परिवर्तनों के दौरान ईवेंट को आग लगाना।

यहाँ मेरी फिडल है:

http://fiddle.jshell.net/wanxe/vsa46bw8/

Answer 1

यह इसलिए होता है क्योंकि रेडियो बटन परिवर्तन के मूल्य से पहले अपने click हैंडलर सक्रिय होता है। इसके बजाय आप change घटना को सुनने के लिए की जरूरत है:

<input 
    type="radio" 
    name="optionsRadios" 
    id="optionsRadios2" 
    value="" 
    v-model="srStatus" 
    v-on:change="foo"> //here 

इसके अलावा, सुनिश्चित करें कि आप वास्तव में तैयार पर foo() कॉल करना चाहते हैं ... बनाने लगता है हो सकता है आप नहीं वास्तव में है कि क्या करना चाहते हैं।

ready:function(){ 
    foo(); 
}, 

Answer 2

आप वास्तव में v-on निर्देशों निकाल कर इस आसान बनाने में कर सकते हैं:

<input type="radio" name="optionsRadios" id="optionsRadios1" 
       value="1" v-model="srStatus"> 

और बदलाव के लिए सुनने के लिए watch विधि का उपयोग करें:

new Vue ({ 
    el: "#app", 

     data: { 
      cases:[ 
        {name: 'case A', status:'1'}, 
         {name: 'case B', status: '0'}, 
         {name: 'case C', status: '1'} 
      ], 
      activeCases: [], 
      srStatus:'' 
     }, 
     watch: { 
      srStatus: function(val, oldVal){ 

       for(var i=0;i<this.cases.length;i++) { 
         if(this.cases[i].status == val){ 
         this.activeCases.push(this.cases[i]); 
         alert("Fired! " + val); 
        } 
       } 
      } 
     } 
}); 

Answer 3

बस सही जवाब में जोड़ने के लिए उपरोक्त, Vue.JS v1.0 में आप

लिख सकते हैं

तो इस उदाहरण में यह होगा

v-on:change="foo" 

देखें: http://v1.vuejs.org/guide/syntax.html#Arguments

Answer 4

Vue2: अगर आप केवल इनपुट कलंक पर परिवर्तन का पता लगाने के लिए चाहते हैं (उदाहरण के लिए प्रेस के बाद दर्ज करें या कहीं और क्लिक करें) कर (अधिक जानकारी here)

<input @change="foo" v-model... > 

आप (उपयोगकर्ता टाइपिंग के दौरान एकल वर्ण परिवर्तन का पता लगाने चाहते हैं)

<input @keyDown="foo" v-model... >