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 catch the value the second time that you press     I want to fire the event without  click only fire the event when v-model  srStatus  changes   here is my Fiddle   http   fiddle jshell net wanxe vsa46bw8

User · Answer

You can actually simplify this by removing the v-on directives:

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

And use the watch method to listen for the change:

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

User · Answer

You should use  input    lt input  input  handleInput    gt     input fires when user changes input value    change fires when user changed value and unfocus input  for example clicked somewhere outside   You can see the difference here  https   jsfiddle net posva oqe9e8pb

User · Answer

Vue2  if you only want to detect change on input blur  e g  after press enter or click somewhere else  do  more info here    lt input  change  foo  v-model     gt    If you wanna detect single character changes  during user typing  use   lt input  keydown  foo  v-model     gt    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    x000D   x000D  new Vue   x000D    el    app   x000D    data     x000D      keyDown    key null  val  null   model  null  modelCopy  null    x000D      keyUp    key null  val  null   model  null  modelCopy  null    x000D      change    val  null   model  null  modelCopy  null    x000D      input    val  null   model  null  modelCopy  null    x000D       x000D       x000D       x000D    methods    x000D     x000D      keyDownFun  function event                        type of event  KeyboardEvent    x000D        console log event     x000D        this keyDown key   event key                    or event keyCode x000D        this keyDown val   event target value           html current input value x000D        this keyDown modelCopy   this keyDown model     copy of model value at the moment on event handling x000D         x000D       x000D      keyUpFun  function event                          type of event  KeyboardEvent x000D        console log event     x000D        this keyUp key   event key                      or event keyCode x000D        this keyUp val   event target value             html current input value x000D        this keyUp modelCopy   this keyUp model         copy of model value at the moment on event handling x000D         x000D       x000D      changeFun  function event                         type of event  Event x000D        console log event   x000D        this change val   event target value            html current input value x000D        this change modelCopy   this change model       copy of model value at the moment on event handling x000D         x000D       x000D      inputFun  function event                          type of event  Event x000D        console log event   x000D        this input val   event target value             html current input value x000D        this input modelCopy   this input model         copy of model value at the moment on event handling x000D        x000D      x000D     x000D  div   x000D    margin-top  20px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs vue 2 5 17 vue js  gt  lt  script gt  x000D   x000D  Type in fields below  to see events details open browser console  x000D   x000D   lt div id  app  gt  x000D     lt div gt  lt input type  text   keyDown  keyDownFun  v-model  keyDown model  gt  lt br gt   keyDown  note  model is different than value and modelCopy  lt br gt  key   keyDown key   lt br gt  value     keyDown val    lt br gt  modelCopy    keyDown modelCopy   lt br gt  model    keyDown model   lt  div gt  x000D     x000D     lt div gt  lt input type  text   keyUp  keyUpFun  v-model  keyUp model  gt  lt br gt   keyUp  note  model change value before event occure   lt br gt  key   keyUp key   lt br gt  value     keyUp val    lt br gt  modelCopy    keyUp modelCopy   lt br gt  model    keyUp model   lt  div gt  x000D     x000D     lt div gt  lt input type  text   change  changeFun  v-model  change model  gt  lt br gt   change  occures on enter key or focus change  tab  outside mouse click  etc   lt br gt  value     change val    lt br gt  modelCopy    change modelCopy   lt br gt  model    change model   lt  div gt  x000D     x000D     lt div gt  lt input type  text   input  inputFun  v-model  input model  gt  lt br gt   input lt br gt  value     input val    lt br gt  modelCopy    input modelCopy   lt br gt  model    input model   lt  div gt  x000D        x000D   lt  div gt  x000D   x000D   x000D

User · Answer

This happens because your click handler fires before the value of the radio button changes  You need to listen to the change event instead    lt input    type  radio     name  optionsRadios     id  optionsRadios2     value      v-model  srStatus     v-on change  foo  gt    here   Also  make sure you really want to call foo   on ready    seems like maybe you don t actually want to do that   ready function        foo

User · Answer

Just to add to the correct answer above  in Vue JS v1 0 you can write    lt a v-on click  doSomething  gt    So in this example it would be    v-on change  foo    See  http   v1 vuejs org guide syntax html Arguments

[javascript] How to fire an event when v-model changes?

Examples related to javascript

Examples related to events

Examples related to vue.js