How to fire an event when v-model changes?

Question

I\'m trying to fire the foo() function with the @click but as you can see, need press the radio button two times to fire the event correctly . Only

Answer 1

Vue2: if you only want to detect change on input blur (e.g. after press enter or click somewhere else) do (more info here)

If you wanna detect single character changes (during user typing) use

You can also use @keyup and @input events. If you wanna to pass additional parameters use in template e.g. @keyDown="foo($event, param1, param2)". Comparision below (editable version here)

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;
}

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


  

 @keyDown (note: model is different than value and modelCopy)
 key:{{keyDown.key}}
 value: {{ keyDown.val }}
 modelCopy: {{keyDown.modelCopy}}
 model: {{keyDown.model}}
  
  

 @keyUp (note: model change value before event occure) 
 key:{{keyUp.key}}
 value: {{ keyUp.val }}
 modelCopy: {{keyUp.modelCopy}}
 model: {{keyUp.model}}
  
  

 @change (occures on enter key or focus change (tab, outside mouse click) etc.)
 value: {{ change.val }}
 modelCopy: {{change.modelCopy}}
 model: {{change.model}}
  
  

 @input
 value: {{ input.val }}
 modelCopy: {{input.modelCopy}}
 model: {{input.model}}