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:
This question is related to
javascript
events
vue.js
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"
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/
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);
}
}
}
}
});
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({_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_
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>_x000D_
_x000D_
Type in fields below (to see events details open browser console)_x000D_
_x000D_
<div id="app">_x000D_
<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>_x000D_
_x000D_
<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>_x000D_
_x000D_
<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>_x000D_
_x000D_
<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>_x000D_
_x000D_
</div>
_x000D_
Source: Stackoverflow.com