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