How to fire an event when v-model changes?

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

---

This happens because your click handler fires before the value of the radio button changes. You need to listen to the change event instead:

<input 
  type="radio" 
  name="optionsRadios" 
  id="optionsRadios2" 
  value=""
  v-model="srStatus" 
  v-on:change="foo"> //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();
},

---

You should use @input:

<input @input="handleInput" />

@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/

---

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

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

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

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

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)

---

Just to add to the correct answer above, in Vue.JS v1.0 you can write

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

So in this example it would be

 v-on:change="foo"

See: http://v1.vuejs.org/guide/syntax.html#Arguments

---