How to fire an event when v-model changes?

小开

最佳答案

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

小开

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

小开

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

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

小开

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/