जब वी-मॉडल बदलता है तो किसी घटना को कैसे फायर किया जाए?

Question 1

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

मैं इस घटना को बिना घटना के आग देना चाहता हूं @clickजब v-model(srStatus) बदलता है।

यहाँ मेरी पहेली है:

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

Question 2

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

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

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

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

Question 3

आप वास्तव में 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);
                }
            }
        }
    }
});

Question 4

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

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

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

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

आप उपयोग @keyupऔर @inputईवेंट भी कर सकते हैं । यदि आप टेम्पलेट में अतिरिक्त मापदंडों का उपयोग करना चाहते हैं, जैसे @keyDown="foo($event, param1, param2)"। नीचे तुलना ( यहाँ संपादन योग्य संस्करण )

कोड स्निपेट दिखाएं

new Vue({
  el: "#app",
  data: { 
    keyDown: { key:null, val: null,  model: null, modelCopy: null },
    keyUp: { key:null, val: null,  model: null, modelCopy: null },
    change: { val: null,  model: null, modelCopy: null },
    input: { val: null,  model: null, modelCopy: null },
    
    
  },
  methods: {
  
    keyDownFun: function(event){                   // type of event: KeyboardEvent   
      console.log(event);  
      this.keyDown.key = event.key;                // or event.keyCode
      this.keyDown.val = event.target.value;       // html current input value
      this.keyDown.modelCopy = this.keyDown.model; // copy of model value at the moment on event handling
    },
    
    keyUpFun: function(event){                     // type of event: KeyboardEvent
      console.log(event);  
      this.keyUp.key = event.key;                  // or event.keyCode
      this.keyUp.val = event.target.value;         // html current input value
      this.keyUp.modelCopy = this.keyUp.model;     // copy of model value at the moment on event handling
    },
    
    changeFun: function(event) {                   // type of event: Event
      console.log(event);
      this.change.val = event.target.value;        // html current input value
      this.change.modelCopy = this.change.model;   // copy of model value at the moment on event handling
    },
    
    inputFun: function(event) {                    // type of event: Event
      console.log(event);
      this.input.val = event.target.value;         // html current input value
      this.input.modelCopy = this.input.model;     // copy of model value at the moment on event handling
    }
  }
})

div {
  margin-top: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Type in fields below (to see events details open browser console)

<div id="app">
  <div><input type="text" @keyDown="keyDownFun" v-model="keyDown.model"><br> @keyDown (note: model is different than value and modelCopy)<br> key:{{keyDown.key}}<br> value: {{ keyDown.val }}<br> modelCopy: {{keyDown.modelCopy}}<br> model: {{keyDown.model}}</div>
  
  <div><input type="text" @keyUp="keyUpFun" v-model="keyUp.model"><br> @keyUp (note: model change value before event occure) <br> key:{{keyUp.key}}<br> value: {{ keyUp.val }}<br> modelCopy: {{keyUp.modelCopy}}<br> model: {{keyUp.model}}</div>
  
  <div><input type="text" @change="changeFun" v-model="change.model"><br> @change (occures on enter key or focus change (tab, outside mouse click) etc.)<br> value: {{ change.val }}<br> modelCopy: {{change.modelCopy}}<br> model: {{change.model}}</div>
  
  <div><input type="text" @input="inputFun" v-model="input.model"><br> @input<br> value: {{ input.val }}<br> modelCopy: {{input.modelCopy}}<br> model: {{input.model}}</div>
     
</div>

स्निपेट का विस्तार करें

Question 5

आपको उपयोग करना चाहिए @input:

<input @input="handleInput" />

@input जब उपयोगकर्ता इनपुट मूल्य बदलता है तो आग लग जाती है।

@change उपयोगकर्ता द्वारा बदले गए मूल्य और अनफ़ोकस इनपुट के दौरान आग लगना (उदाहरण के लिए कहीं बाहर क्लिक किया गया)

आप यहां अंतर देख सकते हैं: https://jsfiddle.net/posva/oqe9e8pb/

Question 6

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

<a v-on:click="doSomething">

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

 v-on:change="foo"

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